Question

我有类似下面的内容。

<div class='sideTitle'>SideTitle</div>
<table><tr><td>r1c1</td><td>r1c2</td></tr><tr><td>r2c1</td><td>r2c2</td></tr></table>

我使用以下CSS将左侧标题浮动到左侧。

.sideTitle { float: left; }

这适用于侧标题根据需要浮动到表格的左侧。但是，我希望副标题在桌子上垂直居中。

我在这里看了一些似乎解决非常类似问题的其他答案（关于垂直居中左浮动div的相当多的结果），但我似乎无法让它们适用于这种情况。

有什么想法吗？这是一个完整的示例，说明了问题。

   <html>
   <head>
      <style type='text/css'>       
         .sideTitle {
            float: left;
         }         
      </style>
   </head>
   <body>
      <div class='sideTitle'>SideTitle</div>
      <table><tr><td>r1c1</td><td>r1c2</td></tr><tr><td>r2c1</td><td>r2c2</td></tr></table>
   </body>
</html>

以下是在浏览器中呈现时的内容。

sample result

这就是我希望它做的事情。

intended result

编辑：cimmanon和@RaphaelRafatpanah的解决方案都是正确的;我标记了Raphael's，因为它略显一般（不要求它们在HTML中彼此紧挨着），但它们都很棒！阻止工作的问题是我需要添加以下内容，以便IE正确呈现它。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 1

对内联元素调整对齐最简单。

http://jsfiddle.net/VBfDF/

.sideTitle {
    display: inline-block;
}

.sideTitle + table {
    display: inline-table;
    vertical-align: middle;
}

Answer 2

当我想要这样的内容时，我会对这两个元素使用display: inline-block和vertical-align: middle。不确定它如何与表一起使用。

Answer 3

这是一种“老派”建议，您可以将“标题”放在标题中并显示表格＆gt;＆lt;标题左侧

<table width="100%" border="1">
  <caption align="left">asdf asdf My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

CSS

table caption {vertical-align:middle}

这不是最好的解决方案，因为

Internet Explorer 8支持“左”，“右”，“顶部”和“底部”值
Internet Explorer 9支持“顶部”和“底部”值
Firefox支持“左”，“右”，“顶部”和“底部”值
Opera支持“left”，“right”，“top”和“bottom”值
Chrome支持“顶部”和“底部”值
Safari支持“顶部”和“底部”值

的jsfiddle http://jsfiddle.net/Jxy4D/

为了更简单的解决方案，只需在表格的左侧添加另一个TD，并使用它有一个“标题”，将其内容垂直对齐到中间。

Answer 4

现在cimmanon做了什么很棒，我为此加了他1，但+运算符所做的是选择紧接在.sideTitle类之前的所有表。注意，该表不是具有.sideTitle类的div的子项，因此以下代码将不起作用：

.sideTitle > table {
display: inline-table;
vertical-align: middle;
}

但是，在您的实际代码中，

.sideTitle + table

如果div class =“sideTitle”和表之间有任何对象，则

可能不是最佳选择器。因此，我创建了一个更新他的代码，如果你确实发现自己陷入了困境，那么这个更新会有效。

以下是jFiddle：http://jsfiddle.net/persianturtle/VBfDF/2/

垂直居中左浮动div与兄弟表元素

4 个答案: