Question

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

通常我需要一个标题：

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

第二个区块中的信息应放在右边缘，因此我将text-align:right设置为<td>，并在其中创建一个inline-block div。所有div中的所有文本，div和其他元素都正确定位，但是如果我创建一个表并将其放入其中，则所述内联块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}

内联块内的表会打破垂直对齐

2 个答案: