Table 内联块破坏了垂直对齐

Question

我在各个项目中都遇到过这个问题，但仍然不明白为什么会出现。

通常我需要一个 header 比如：

<header><table><td valign="top">1st block</td><td valign="top">2nd block</td></table></header>

第二块的信息应该放在右边，所以我将text-align:right设置为<td>，并在其中创建一个inline-block div。所有文本、divs 和其他元素表示 div 位于正确位置，但如果我创建一个 table 并将它们放入其中，表示 inline-block div 得到 2 -4 像素比它应该的高。 http://jsfiddle.net/njaqb2eu/4/

如何解决？

Answer 1

您可以使用 padding-top 样式元素将较高的元素向下推。从 1 开始，一直向上直到获得所需的对齐方式。您也可以尝试使用内联或块而不是内联块。大约有 20 种显示样式选项也可能对您的情况有所帮助。

我认为，主要问题是第二个元素进一步（例如更深）嵌套在 html 元素层次结构中。如果您可以获得层次结构中同一级别的元素，则对齐应该有效。您可以尝试将第一个元素推得更深以匹配第二个元素的水平。

Answer 2

我认为您需要重置一些元素。浏览器默认设置给您带来了一些麻烦：

td, tr, table, th{
    padding: 0;
    border-spacing:0;
}
.full_width{width:100%}
.full_height{height:100%}

.header{width:98%;height:60px;border:2px solid #eee}
.header-center{width:70%;height:100%;margin:0 auto}

.header-part_1{width:30%;    display: table-cell;
  vertical-align: middle;
}
.header-part_2{width:70%;  display: table-cell;
  vertical-align: middle;}

.header-text{border:1px solid black}
.inline-block{border:1px solid red}

Table 内联块破坏了垂直对齐

Table inside inline block breaks vertical alignment

css

html-table

vertical-alignment