文章/答案/技术大牛

发布

社区首页 >问答首页 >内嵌块内的表破坏垂直对齐。

问内嵌块内的表破坏垂直对齐。
EN

Stack Overflow用户

提问于 2015-09-30 16:08:23

回答 2查看 632关注 0票数 0

我从一个项目到另一个项目都遇到了这个问题，但仍然不明白为什么会出现这个问题。

通常我需要一个标题，比如：

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

怎么修呢？

css

html-table

vertical-alignment

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-09-30 16:31:54

我觉得你需要重置一些元素。浏览器默认设置会给您带来一些麻烦：

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}

票数 0

Stack Overflow用户

发布于 2015-09-30 16:25:45

您可以使用填充顶样式元素将较高的元素向下推。从1开始，一直往上走，直到你得到你想要的对齐。您也可以尝试使用内联或块，而不是内联块。有大约20个显示风格的选项，可能有助于您的情况以及。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32870872

复制

相似问题

问内嵌块内的表破坏垂直对齐。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内嵌块内的表破坏垂直对齐。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内嵌块内的表破坏垂直对齐。
EN