My website header consists of a container with three divs. The header container is 100px high. The first div floats to the left with a width of 150px, while the second div floats to the right also with a width of 150px. The third div contains another div inside it and adjusts its size to fill the remaining space.
I am trying to achieve vertical centering for the third div. However, when I apply display: table-cell and vertical-align: middle, the div shrinks to fit the text. Adjusting the size requires using fixed dimensions.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
I am seeking suggestions on how to center the middle div without specifying the exact width?
If I remove the display: table-cell property from the heading class, the div is no longer centered vertically but remains aligned horizontally.