无法在中间垂直对齐表格

我有以下代码，而我的表格（表格包含图片旁边的两个文本行）只是不想在div中间垂直对齐。该怎么办？请注意，我使用了一个表格来处理我的两个文本行（层叠美和完美放在一起），因为它们有不同的样式，我希望它们对齐，所以我把align = center放在它们的td标签上...（证明text属性只有当文本在同一个标签中时才起作用...）。我的网站：http://lamininbeauty.co.za/index2.html 无法在中间垂直对齐表格

HTML：

 <div id="header"> 
      <img class="massage" src="images/massage.png" border="none" alt="face massage" /> 
      <div class="headerDiv"> 
       <table margin="0" padding="0"> 
       <tr><td align="center" class="headerText1">Laminin Beauty</td></tr> 
       <tr><td align="center" class="headerText2">"Perfectly put together"</td></tr> 
       </table> 
      </div> 
     </div>

CSS：

#header{ 
    width: 100%; 
    height: 100px; 
    background: #000000; 
} 

#header img{ 
    margin-left: 50px; 
    vertical-align: middle; 
    display: inline-block; 
    float: left; 
} 

#header div.headerDiv{ 
    display: table-cell; 
    margin-left: 80px; 
    vertical-align: middle; 
} 

.headerText1{ 
    color: #fff; 
    font-family: impact; 
    font-size: 32px; 
    text-decoration: underline; 
} 

.headerText2{ 
    color: #ee00ee; 
    font-family: century gothic; 
    font-size: 24px; 
}

谢谢！

来源

2012-07-18 DextrousDave

使包含表格的div具有100px的固定高度，因为这是Wrapper div的高度。然后，将表格的高度设置为100％。下面是它为我做的一个截图，并不完全确定这是否是你想要的：http://screencast.com/t/cbwcBbAoM3cZ

来源

2012-07-18 20:10:29 DOCbrand

谢谢你，你指示的方向很好，但我不喜欢包含文本的单元格之间的空格。我总是使用display：table-cell和vertical-align：middle，并且始终将我的东西垂直居中，但由于某种原因，它现在不起作用 – DextrousDave 2012-07-18 20:21:07

您可以始终垂直对齐：顶部单元格底部，然后vertical-align：顶部第二个单元格，如果有帮助...使用我在我的答案也提供相同的CSS。 – DOCbrand 2012-07-18 20:26:38

伟大的思想，谢谢，对于我的模型，这是完美的。欣赏 – DextrousDave 2012-07-18 20:53:14

如果主标题div始终为100px高，请从headerDiv元素中删除display属性，并添加margin-top: 12px;。

此外它应该有display: inline-block增加和可能的左边距下降以弥补。显示属性更改将使其推下图像，而不是文档的左侧，因为它应该。

此外，如果您希望左侧的两段文本对齐，请将text-align: left添加到表格标记。

来源

2012-07-18 20:07:13 Blieque

谢谢你的回答，但我不认为你理解我的问题。通过使用边距来调整任何元素是非常糟糕的做法。另外，我希望我的文本是合理的，而不是左对齐。它是左对齐，如果我没有放在桌子td标签的属性对齐=“中心” – DextrousDave 2012-07-18 20:14:27

据我所知，在边缘使用负值被认为是不好的做法，但有什么问题在一个元素的顶部？：| – Blieque 2012-07-20 16:03:05

无法在中间垂直对齐表格

回答

相关问题