Html 垂直居中左浮动div wrt同级表元素_Html_Css

Html 垂直居中左浮动div wrt同级表元素

html css

Html 垂直居中左浮动div wrt同级表元素,html,css,Html,Css,我有下面这样的东西 <div class='sideTitle'>SideTitle</div> <table><tr><td>r1c1</td><td>r1c2</td></tr><tr><td>r2c1</td><td>r2c2</td></tr></table> 这是因为侧标题根据需要浮动到表的左侧

我有下面这样的东西

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

这是因为侧标题根据需要浮动到表的左侧。但是，我希望侧标题垂直于表格居中

我在这里查看了一些其他答案，这些答案似乎解决了非常类似的问题（关于垂直居中的左浮动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>


.副标题{
浮动：左；
}         
副标题
r1c1r1c2r2c1r2c2

下面是上面在浏览器中渲染时的样子

这是我想要做的

编辑：cimmanon和@RaphaelRafatpanah的解决方案都是正确的；我标记了Raphael的，因为它稍微更一般（不要求它们在HTML中紧靠在一起），但它们都很棒！问题是，我需要添加以下内容，以便IE能够正确地渲染它。

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

当我想要这样的东西时，我会对这两个元素使用

显示：内联块

和

垂直对齐：中间

。不确定它将如何与表一起工作。

当我想要类似的东西时，我会对这两个元素使用

显示：内联块

和

垂直对齐：中间

。不确定它将如何处理表格。

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

在内联图元上调整对齐方式最简单

这是一种“老派”建议，你可以把你的“标题”放在标题中并将表格显示在
<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>
这不是最好的解决方案，因为

Internet Explorer 8支持“左”、“右”、“上”和“下”值

Internet Explorer 9支持“顶部”和“底部”值

Firefox支持“左”、“右”、“上”和“下”值

Opera支持“左”、“右”、“上”和“下”值

Chrome支持“顶部”和“底部”值

Safari支持“顶部”和“底部”值

JSFIDLE

为了获得更简单的解决方案，只需在表格左侧添加另一个TD，并使用带有“标题”的TD，将其内容垂直对齐到中间。
这是一种“老派”建议，您可以将“标题”放在标题中，并在表格左侧显示

<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>
这不是最好的解决方案，因为

Internet Explorer 8支持“左”、“右”、“上”和“下”值

Internet Explorer 9支持“顶部”和“底部”值

Firefox支持“左”、“右”、“上”和“下”值

Opera支持“左”、“右”、“上”和“下”值

Chrome支持“顶部”和“底部”值

Safari支持“顶部”和“底部”值

JSFIDLE

为了获得更简单的解决方案，只需在表的左侧添加另一个TD，并使用带有“标题”的TD，将其内容垂直对齐到中间。
现在cimmanon所做的非常好，我对他表示感谢，但+运算符所做的是选择.sideTitle类前面的所有表。请注意，该表不是.sideTitle类的div的子级，因此以下代码不起作用：

.sideTitle > table { display: inline-table; vertical-align: middle; }
但是，在实际代码中

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

这是给你的jFiddle:
现在，cimmanon做的非常好，我对他进行了+1测试，但是+操作符所做的是选择.sideTitle类前面的所有表。请注意，该表不是.sideTitle类的div的子级，因此以下代码不起作用：

.sideTitle > table { display: inline-table; vertical-align: middle; }
但是，在实际代码中

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

以下是jFiddle：当您有3行或更多行时，应该如何处理？侧标题是否应该相对于整个表格完全居中？@ajon是的，它应该垂直居中于整个表格，而不管表格行数/表格高度。div似乎不是标记标题的合适选择：尝试标题（h1-h6）或者表格标题。@cimmanon使用h1标记而不是div没有帮助，我得到了相同的结果。不过，我确实明白你的意思，其他标签可能更合适。这无助于使文本垂直居中。如果有3行或更多行，该如何处理？侧标题是否应该相对于整个表格完全居中？@ajon是的，它应该垂直居中于整个表格，而不管表格行数/表格高度。div似乎不是标记标题的合适选择：尝试标题（h1-h6）或者表格标题。@cimmanon使用h1标记而不是div没有帮助，我得到了相同的结果。不过，我确实明白你的意思，其他标签可能更合适。只是无法帮助文本垂直居中。是否有一个浏览器可以提供OP想要的外观？因为我没有在Opera或Chrome中看到它，甚至在他自己的JSFIDLE中都不起作用。一定是误解了这个问题。嗨，不，我没有误解。。只是我迟到了。不再支持表格标题。。Internet Explorer 8支持“左”、“右”、“上”和“下”值