VERTICAL CENTERING

What is the best way for vertical centering of a floated element inside a div box ?

5 Answers
Top Voted Recent Answer
1-5 of  5
5 Answers
Top Voted Recent Answer
  • Hello,
    Following is the HTML code:
    <div class="container">
         <div id='logo' class="my-auto">
              <h1 class="align-middle">Youth4work</h1>
         </div>
    </div>

    For CSS you should follow the following code:
    #logo{
         background-color: aquamarine;
         height: 500px;
         display: flex;
         align-items: center;
    }
    0
  • Use align function in CSS:
    text-align:center;
    0
  • if we given <div id = 'title-container'>
    <div id='logo'><img src='images/topLogo.png'></div>
    <div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
    </div>
                                                                                                   
     then we write  #title-container{ height: 80px;
    width: 980px;
    background-color: yellow;
    display: table-cell;
    vertical-align: middle
    }
    #logo
    { display: table-cell;
    margin: 10px
    ; float:left;
    }
    #search{ display: table-cell;
    text-align: right;
    margin: 10px;
    vertical-align: middle;
    float:right;
    }

     
    0
  • Below class place the div at vertical center of the page. If you want the elements in the vertical centered div need to be at center. Then add addionally text-align:center;
    .customclass {
                top:50%;
                position: absolute;
     }
    0
forum   Other Related Discussions
Html

Didn't get the answer.
Contact people of Talent-Html directly by clicking here