垂直对齐奇怪地工作（在单元格标签上）
Vertical-align works strangely (on cell-tabs)
我在使用 vertical-align:top; 时遇到问题； 属性 在单元格选项卡上 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;
}
非常感谢您的帮助！
你的 vertial-align: top 你指的是这里的效果：http://jsfiddle.net/bdoq99a2/1/
我只是改变了这个：
.tableau *{
display: inline;
}
问题来自浏览器样式表，在本例中是段落的默认边距。无需为 display: table-cell 和 vertical-align: top 而烦恼。只需检查 fiddle：http://jsfiddle.net/bdoq99a2/2/
.tableau {
border:1px solid black;
}
.tableau p {
display: inline-block;
margin: 0;
}
<div class='tableau'>
AAAA<img class='img1' src='http://lorempixel.com/400/200/' />
<img class='img3' src='http://lorempixel.com/300/200/' />
<span>BBBB</span>
<p>CCCC<img src='http://lorempixel.com/300/200/' />DDDD</p>
</div>
赞扬你想明白。 vertical-align 的问题是 HTML 和 CSS 不需要太多的时间就可以进行很多事情。我们可以做些什么来逐步构建布局。
AAAA
此文本放置在匿名内联框中。这进入一个行框，前面是一个 zero-width 内联框，它是容器元素字体的高度，称为 strut。支柱和 AAAA 文本相对于彼此的基线彼此垂直对齐。所以我们已经
<img class='img1' src='...' />
.img1元素的vertical-align是默认的baseline，图片被替换为行内元素，所以图片的baseline就是它的bottom margin边缘。 .img1 没有边距、边框或填充，因此它成为图像本身的底部边缘，所以现在，如果我们假设图像比字体高，我们有
请注意，线框现在比以前更高以容纳图像。事实上，line box 比它的任何组成部分都要高。
<img class='img2' src='...' /> 第一部分
我们暂时跳过第二张图片，稍后再回来看。我们现在只留下一个占位符。
<span>BBBB</span>
与 AAAA 完全一样，只是这里的行内框是由真实元素构成的，而不是匿名的。这给了我们
CCCC<img src='...' />DDDD
这与 AAAA<img src='...' />BBBB` 完全一样。此处没有新内容可添加。
<p>CC...DD</p>
p 元素设置为 inline-block，这意味着它对所在行的 line-height 贡献是它的边距框。它具有来自用户代理样式表的默认页边距（通常）为 1em 顶部和底部。它也使用其基线与线上的其他元素对齐。所以现在我们有
行框的高度再次增加，这次是为了容纳 p 元素的边距框。
<img class='img2' src='...' /> 第二部分
现在我们可以填写之前为 .img2 留下的占位符。这个图像是vertical align:top，所以它没有与其他元素对齐，而是与行框的顶部对齐。所以这给了我们
.tableau { display:table-cell; vertical-align:top; }
然后整个被包裹成一个并位于table-cell的顶部。
总结
最后，我们需要解释为什么 "AAAA" 出现在您图片的顶部，而不是与我上面的回答中描述的其他文本对齐。这似乎是因为您从 Chrome 捕获了图片，因此受到了 Chrome 古怪的 vertical-align 实施的影响。 Firefox 和 IE 正确显示布局。
我在使用 vertical-align:top; 时遇到问题； 属性 在单元格选项卡上 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;
}
非常感谢您的帮助！
你的 vertial-align: top 你指的是这里的效果：http://jsfiddle.net/bdoq99a2/1/
我只是改变了这个：
.tableau *{
display: inline;
}
问题来自浏览器样式表，在本例中是段落的默认边距。无需为 display: table-cell 和 vertical-align: top 而烦恼。只需检查 fiddle：http://jsfiddle.net/bdoq99a2/2/
.tableau {
border:1px solid black;
}
.tableau p {
display: inline-block;
margin: 0;
}
<div class='tableau'>
AAAA<img class='img1' src='http://lorempixel.com/400/200/' />
<img class='img3' src='http://lorempixel.com/300/200/' />
<span>BBBB</span>
<p>CCCC<img src='http://lorempixel.com/300/200/' />DDDD</p>
</div>
赞扬你想明白。 vertical-align 的问题是 HTML 和 CSS 不需要太多的时间就可以进行很多事情。我们可以做些什么来逐步构建布局。
AAAA
此文本放置在匿名内联框中。这进入一个行框，前面是一个 zero-width 内联框，它是容器元素字体的高度，称为 strut。支柱和 AAAA 文本相对于彼此的基线彼此垂直对齐。所以我们已经
<img class='img1' src='...' />
.img1元素的vertical-align是默认的baseline，图片被替换为行内元素，所以图片的baseline就是它的bottom margin边缘。 .img1 没有边距、边框或填充，因此它成为图像本身的底部边缘，所以现在，如果我们假设图像比字体高，我们有
请注意，线框现在比以前更高以容纳图像。事实上，line box 比它的任何组成部分都要高。
<img class='img2' src='...' /> 第一部分
我们暂时跳过第二张图片，稍后再回来看。我们现在只留下一个占位符。
<span>BBBB</span>
与 AAAA 完全一样，只是这里的行内框是由真实元素构成的，而不是匿名的。这给了我们
CCCC<img src='...' />DDDD
这与 AAAA<img src='...' />BBBB` 完全一样。此处没有新内容可添加。
<p>CC...DD</p>
p 元素设置为 inline-block，这意味着它对所在行的 line-height 贡献是它的边距框。它具有来自用户代理样式表的默认页边距（通常）为 1em 顶部和底部。它也使用其基线与线上的其他元素对齐。所以现在我们有
行框的高度再次增加，这次是为了容纳 p 元素的边距框。
<img class='img2' src='...' /> 第二部分
现在我们可以填写之前为 .img2 留下的占位符。这个图像是vertical align:top，所以它没有与其他元素对齐，而是与行框的顶部对齐。所以这给了我们
.tableau { display:table-cell; vertical-align:top; }
然后整个被包裹成一个并位于table-cell的顶部。
总结
最后，我们需要解释为什么 "AAAA" 出现在您图片的顶部，而不是与我上面的回答中描述的其他文本对齐。这似乎是因为您从 Chrome 捕获了图片，因此受到了 Chrome 古怪的 vertical-align 实施的影响。 Firefox 和 IE 正确显示布局。