0

我有类似下面的东西。

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

这是上面在浏览器中呈现时的样子。

样本结果

这就是我想要它做的事情。

预期结果

编辑：cimmanon 和@RaphaelRafatpanah 的解决方案都是正确的；我标记了 Raphael's，因为它稍微更通用（不要求它们在 HTML 中立即彼此相邻），但它们都很棒！阻止任何一个工作的问题是我需要添加以下内容，以便 IE 正确呈现它。

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

4 回答 4

3

在内联元素上调整对齐是最简单的。

http://jsfiddle.net/VBfDF/

.sideTitle {
    display: inline-block;
}

.sideTitle + table {
    display: inline-table;
    vertical-align: middle;
}
于 2013-02-11T15:52:39.190 回答
1

当我想要类似的东西时，我使用display: inline-blockandvertical-align: middle两个元素。不确定它将如何与表一起使用。

于 2013-02-11T15:51:32.203 回答
1

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

<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 支持“left”、“right”、“top”和“bottom”值
  • Internet Explorer 9 支持“top”和“bottom”值
  • Firefox 支持“left”、“right”、“top”和“bottom”值
  • Opera 支持“left”、“right”、“top”和“bottom”值
  • Chrome 支持“top”和“bottom”值
  • Safari 支持“顶部”和“底部”值

jsfiddle http://jsfiddle.net/Jxy4D/

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

于 2013-02-11T15:55:35.360 回答
0

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

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

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

.sideTitle + table

如果 div class="sideTitle" 和表格之间有任何对象，则可能不是最佳选择器。因此，我为他的代码创建了一个更新，如果您确实发现自己处于这种困境中，它将起作用。

这是适合您的 jFiddle：http: //jsfiddle.net/persianturtle/VBfDF/2/

于 2013-02-11T16:03:16.640 回答