html - 具有显示 : table-cell 的 CSS 调整大小的 div

Question

我的网站上有一个标题，它有一个容器和三个 div。

标题容器高 100 像素。第一个div向左浮动，宽度为150px第二个div向右浮动，宽度为150px第三个 div 内部有另一个 div，默认情况下会调整大小以填充剩余空间。

我希望第三个 div 垂直居中。当我添加 display: table-cell 和 vertical-align: middle 时，div 会缩小到文本的大小。我只能使用固定大小调整 div 的大小。

<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;
}

谁能告诉我如何在不知道确切宽度的情况下将中间 div 居中？

如果我从标题类中取出 display: table-cell，它不再垂直居中而是水平居中。

Answer 1

我想这可能就是您要找的...我更改了 css 中的 div.header 以在顶部填充，删除了表格单元格并将边距设置为自动而不是宽度自动。看看这是否是您所希望的。您必须根据间距调整顶部的填充，但这对我来说似乎是最简单的方法。

#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
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}


div.leftimg
{
width: 150px;
float: left;
}

div.rightimg
{
width: 150px;
float: right;
}

<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>