html - 垂直居中左浮动 div wrt 同级表元素-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 20:52:01

我有类似下面的内容。

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

我使用以下 CSS 将副标题 float 到左侧。

.sideTitle { float: left; }

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

我在这里查看了其他一些答案，这些答案似乎解决了非常相似的问题(关于垂直居中左浮动 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 的，因为它稍微更通用(不要求它们在 HTML 中紧挨着彼此)，但它们都很棒!阻止任何一个工作的问题是我需要添加以下内容，以便 IE 正确呈现它。

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

最佳答案

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

http://jsfiddle.net/VBfDF/

.sideTitle {
    display: inline-block;
}

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

关于html - 垂直居中左浮动 div wrt 同级表元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14815533/

文章推荐： c# - 终结器中处置的资源与处置中释放的资源有什么区别

文章推荐： c++ - 使用 Opencv 模糊矩形中的内容

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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