How to vertical align text in the middle without changing size of a div

Question

I need to make the text "Hello world" in the left box as (vertical) middle.

If I change CSS

.red-banner .text { background: rgb(32,56,100); color: white; padding-top:8px; }

then "Hello world" will be shifted a little bit down, but the black background will be shifted also and overlap the below banner.

So how can I align the text inside the box vertical middle without changing the size of the black background? (the content of the text is maximal 2 lines).

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .banner { position: relative; } .banner .text { position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text { display: block; } .red-banner .text { background: rgb(32,56,100); color: white; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text"> Hello world. </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text"> Hello world, this is a test message for the effect. </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

Answer 1

Option 1: Alignment Using Flexbox

Apply display: flex; property to .text to make it a flexbox container, and

• Use justify-content to horizontally align the content.
• Use align-items to vertically align the content.

Have a look at the snippet below:

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .row { display: flex; } .banner { position: relative; } .banner .text { position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text { display: flex; justify-content: center; align-items: center; } .red-banner .text { background: rgb(32,56,100); color: white; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text"> Hello world. </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text"> Hello world, this is a test message for the effect. </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

Option 2: Alignment Using Table & Table Cell

You can use display: table . But for this you will have to change your HTML structure a little bit, something like:

<div class="text table"> <!-- display: table -->
  <div class="table-cell"> <!-- display: table-cell -->
     Hello World
  </div>
</div>

then use vertical-align: middle & text-align: center on .table-cell element. Have a look at the snippet below:

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .row { display: flex; } .banner { position: relative; } .banner .text { position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text.table { display: table; height: 50px; } .banner:hover .text.table .table-cell { display: table-cell; vertical-align: middle; text-align: center; } .red-banner .text { background: rgb(32,56,100); color: white; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text table"> <div class="table-cell"> Hello world. </div> </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text table"> <div class="table-cell"> Hello world, this is a test message for the effect. </div> </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

Hope this helps!

Answer 2

Try below css

text-align: center;

in the text class to align the text

Answer 3

To align item vertically Flex box is the best idea , Old tricks and hacks can do the Job but your layout will need be solid design and flexible , So a use of flex box is necessary : first of all we change the display for the parent item :

diplay:flex

then we use :

justify-content:center to center item horizontally ,

and for vertical alignment we use :

align-item :center 

And since you said you cannot use Flex ; there is another way by using line-height

.banner:hover .text
    display: block;
    text-align: center;
    line-height: 50px;

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .row { display: flex; } .banner { position: relative; } .banner .text { position: flex; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text { display: flex; } .red-banner .text { background: rgb(32,56,100); color: white; display:flex; justify-content:center; align-items:center; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text"> Hello world. </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text"> Hello world, this is a test message for the effect. </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

Answer 4

Wrap the text need to be centered inside divs like this. Hope it will help you.

<div class="text">
    <div class="custom-trow">
        <div class="custom-tcell">
            Hello world.
        </div>
    </div>
</div>

and apply the following CSS rules.

.custom-trow {
    display: table;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.custom-tcell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Answer 5

You can try this. http://howtocenterincss.com/ Hope it will help you.