htmlamateur htmlamateur - 22 days ago 7
CSS Question

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

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.

hello world

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

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!