垂直对齐奇怪地工作（在单元格选项卡上）

时间：2015-01-17 09:38:57

标签： html css inline vertical-alignment

使用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;
}

非常感谢你的帮助！

3 个答案:

答案 0 :(得分：2)

我赞赏你想要理解。 vertical-align的问题在于，它并没有花费太多的HTML和CSS来进行相当多的工作。我们可以做些什么来逐层建立布局。

的 AAAA

此文本位于匿名内联框中。这是一个行框，前面是一个零宽度的内联框，它是容器元素字体的高度，称为strut。支柱和AAAA文本相对于彼此基线彼此垂直对齐。我们已经

了

Figure with AAAA text, strut, baseline and line box

的 <img class='img1' src='...' />

.img1元素的垂直对齐是默认值，即基线，图像替换为内联元素，因此图像的基线是其下边距边缘。 .img1没有边距，边框或填充，因此它使它成为图像本身的底边，所以现在，如果我们假设图像比字体高，我们有

addition of img element to the first figure

请注意，线框现在比以前更高，以容纳图像。事实上，线盒比任何组件都要高。

<img class='img2' src='...' />第一部分

我们暂时跳过第二张图片，稍后再回过头来看看。我们暂时只留一个占位符。

的 <span>BBBB</span>

正如AAAA，除了在这里内联框由真实元素而不是匿名形成。这给了我们

addition of placeholder and BBBB text to figure 2

的 CCCC <img src='...' /> DDDD

这与AAAA<img src='...' /> BBBB`完全相同。这里没有新的东西。

的 <p>CC...DD</p>

p元素设置为inline-block，这意味着它对行所在行的行高贡献是它的边距框。它具有（通常）1em顶部和底部的用户代理样式表的默认边距。它也使用其基线与线上的其他元素对齐。所以我们现在有了

addition of p element to figure 3

线框的高度再次增加，这次是为了容纳p元素的边距框。

<img class='img2' src='...' />第二部分

现在我们可以填写我们之前为.img2留下的占位符。此图片为vertical align:top，因此它不与其他元素对齐，但与行框的顶部对齐。这样就给了我们

addition of top aligned image to figure 4

的 .tableau { display:table-cell; vertical-align:top; }

然后整个事物被包裹为一个并位于表格单元格的顶部。

总结

最后，我们需要说明为什么＆＃34; AAAA＆＃34;出现在图片的顶部，而不是与我上面的答案中描述的其他文字对齐。这似乎是因为您从Chrome中捕获了图片，因此受到了Chrome的垂直对齐实施。 Firefox和IE正确显示布局。

答案 1 :(得分：0)

使用您的vertial-align: top您的意思是效果如下：http://jsfiddle.net/bdoq99a2/1/

我只是改变了这个：

.tableau *{
   display: inline;
}

图片：http://take.ms/BxlzD

答案 2 :(得分：0)

问题来自浏览器样式表，在这种情况下是段落的默认边距。无需与显示器大惊小怪：table-cell和vertical-align：top。只需检查小提琴：http://jsfiddle.net/bdoq99a2/2/

＆＃13;
＆＃13; 
.tableau {
    border:1px solid black;
}
.tableau p {
    display: inline-block;
    margin: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题