我在使用 vertical-align:top; 时遇到问题； cell-tab css 内容的属性。
这里是图片:http://img4.hostingpics.net/pics/157625Capture.png
我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style_test.css" />
<title>Test</title>
</head>
<body>
<div class='tableau'>
AAAA<img class='img1' src='images/drapeau_anglais.gif' />
<img class='img2' src='images/drapeau_anglais.gif' />
<span>BBBB</span>
<!-- This text lose the vertical-align:top; propertie because it is in the <span> => WHY ??? -->
<p>CCCC<img src='images/drapeau_anglais.gif' />DDDD</p>
<!-- As in the span, everything in my <p> loose it s vertical align propertie -->
</div>
</body>
</html>
我的 CSS 代码:
.tableau
{
display:table-cell;
border:1px solid black;
vertical-align:top;
}
.tableau p
{
display:inline-block;
}
.img1
{
/* I dont say anything here. img1 SHOULD be on top because of the ".tableau" class but it doesnt... why???*/
}
.img2
{
/* I force the vertical align on my image (but I shouldnt have to do that normally ?) But with this "trick" it works */
vertical-align:top;
}
非常感谢您的帮助!
最佳答案
我赞扬你想要理解。 vertical-align 的问题是不需要太多的 HTML 和 CSS 就可以进行很多事情。我们可以做些什么来逐步构建布局。
AAAA
此文本放置在匿名内联框中。这进入一个行框，前面是一个零宽度的行内框，它是容器元素字体的高度，称为 strut。支柱和 AAAA 文本相对于彼此的基线彼此垂直对齐。所以，我们已经
<img class='img1' src='...' />
.img1 元素的vertical-align 是默认的baseline，images 被替换为行内元素，所以image 的baseline 就是它的bottom margin 边缘。 .img1 没有边距、边框或填充，因此它成为图像本身的底部边缘，所以现在，如果我们假设图像比字体高，我们有
请注意，线框现在比以前更高以容纳图像。事实上，line box 比它的任何组成部分都要高。
<img class='img2' src='...' />第一部分
我们暂时跳过第二张图片，稍后再回来看。我们现在只留下一个占位符。
<span>BBBB</span>
与 AAAA 完全一样，除了这里的行内框是由真实元素构成的，而不是匿名的。这给了我们
中国交建<img src='...' /> DDDD
这与 AAAA<img src='...' /> 完全一样BBBB`。这里没有新内容要添加。
<p>CC...DD</p>
p 元素被设置为 inline-block，这意味着它对其所在行的行高贡献是它的边距框。它具有来自用户代理样式表的默认页边距(通常)为 1em 顶部和底部。它也使用其基线与线上的其他元素对齐。所以现在我们有
行框的高度再次增加，这次是为了容纳 p 元素的边距框。
<img class='img2' src='...' />第二部分
现在我们可以填写之前为 .img2 留下的占位符。此图像是 vertical align:top , 所以它不与其他元素对齐，而是与行框的顶部对齐。所以这给了我们
.tableau { display:table-cell; vertical-align:top; }
然后整个被打包成一个并放置在表格单元格的顶部。
总结
最后，我们需要解释为什么“AAAA”出现在您图片的顶部，并且没有与我上面的回答中描述的其他文本对齐。这似乎是因为您从 Chrome 捕获了图片，因此受到了 Chrome 扭曲的垂直对齐实现的影响。 Firefox 和 IE 正确显示布局。
关于html - 垂直对齐奇怪地工作(在单元格标签上)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27998159/