Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to align an elements center horizontally and vertically?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 67
    Comment on it

    If you want to align your text to be centered inside the box from both side (horizontally and vertically) you can do this very easily, this below example will helps you.

    Html:

     

     <div class="contentbox">
    
    <p>This is the text to be centralized</p>
    
     </div>

     

    CSS: 

    .contentbox{
       	width: 200px;
       	height: 100px;
                border: 1px solid #111;
       	margin: 0 auto;
                border-radius: 5px;
       	display: table;    /* element will be displayed as an inline-level table */
       }
       .contentbox p{
       	text-align: center; /* elements will be displayed as horizontally center */
       	vertical-align: middle; /* elements will be displayed as vertically middle */
       	display: table-cell;      /* let the element behave like a <td> element */
    
    }

     

    According to above code:

    1. Height and width is not mandatory, I have provided the height and width to show you the output as because by default it will take 100% height and width hence you can define the height and width of box according to the height and width of your requirement .

    2. Margin: 0 auto; -: Here auto means box will horizontally placed in center and 0 means it will take margin 0 from top and bottom.

    3. Display:table; The element will be displayed as an inline-level table.

    4. Text-align:center; The elements will be displayed as horizontally center.

    5. vertical-align:middle; The elements will be displayed as vertically middle.

    Display:table-cell;  It will let the element behave like a <td> element.

     

     

    The output of above code will be:

    How to align an elements center horizontally and vertically?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: