我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。

要在所有常见浏览器上工作,需要什么样的CSS ?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

当前回答

就在这个:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

一个单元表内的div处理垂直对齐和向后兼容回石器时代!

其他回答

要将块元素定位到中心(适用于Internet Explorer 9及以上版本),它需要一个包装器div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

所有这些都需要在div中垂直对齐

对齐的如何?图片的顶部与文字的顶部对齐?

其中一个图像需要在div中绝对定位。

相对于DIV的绝对定位?也许你可以把你要找的东西画出来?

fd描述了绝对定位的步骤,以及调整H1元素的显示,以便图像将与它内联显示。除此之外,我还要补充一点,你可以使用vertical-align样式来对齐图像:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...这将把标题和图像放在一起,顶部边缘对齐。还有其他对齐选项;请参见文档。你可能还会发现删除DIV并将图像移动到H1元素内部是有益的——这为容器提供了语义值,并消除了调整H1显示的需要:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

我一个朋友的一个技巧:

Div:前面{内容:" ";显示:inline-block;高度:100%;vertical-align:中间;} Div p{显示:inline-block;} < div风格= "高度:100 px;边界:1 px固体;" > < span style=" font - family:宋体;"</p> .我是垂直居中的 < / div >

演示。

只需在div中使用一个单格表!只需设置单元格和表格的高度和与100%,你可以使用垂直对齐。

一个单元表内的div处理垂直对齐和向后兼容回石器时代!

就在这个:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

一个单元表内的div处理垂直对齐和向后兼容回石器时代!