對齊內聯塊的div

Question

任何人都可以在http://jsfiddle.net/Z7z5Q/解釋div的行為嗎？ 我想知道，為什么他們沒有在一條線上對齊？ 為什么向div添加文本會移動其他div？

這是html和css：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis"></div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family"></div>

    </body>
</html>

CSS：

div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius: 100%;
    border: 2px solid black;
}

.friend {
   border: 2px dashed #008000;  
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border:4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}

謝謝。 將欣賞文檔或文章的鏈接。

Answer 1

元素是對齊的......但不是按照你想要的方式，顯然;）

您的問題的關鍵是屬性vertical-align 。
首先刪除border-radius以便更好地查看框。
然后添加vertical-align: middle; ：問題解決了（見小提琴）

內容與否，每個框現在相對於其固定高度對齊（您將其固定為100px）。

在沒有vertical-align: middle;情況下首先發生了什么vertical-align: middle; ？ 更改baseline的值：您將回到原始問題。 這是默認值，例如在span s中顯示文本時所需要的值，或標簽和文本字段的文本，無論兩者中的填充和邊距。 但是，由於文本被迫占據2或3行（無論內容是100px寬，所以基線與您期望的非常不同，它是內容的基線，也就是最后一行文本。
與空div相同：因為它們缺乏與之對齊的內容，它們的基線是它們的底線（不太確定這個，但這似乎發生了）。
在一些空div添加單個字符或不可破壞的空格：它們的基線現在與空div完全不同。 看其他小提琴

在一段文字中丟失一張高大的圖像會發生同樣的現象; 你可以將它與vertical-align但區別在於它更容易看到發生了什么。 在這里，您沒有出現“正常”文本，因此發現它有點困難。

為何浮動：左; 在這里工作？ 它將采用每個盒子，所有相同的高度，並相對於盒子對齊，而不是與其內容對齊。 但是你要管理清算並在一個盒子上多打1px就可以打破以下所有盒子的對齊...

Answer 2

inline-block是一個具有許多好奇心的屬性。 在這個例子中，你可以清楚地看到從div CSS規則中刪除height: 100px將導致元素的文本對齊，而華麗的圓形虛線多色邊框則不是那么明顯。 所以要解決這個問題，你可以應用vertical-align: top 。 （來源）

“內聯塊”的基線是正常流程中其最后一個線框的基線，除非它沒有流入線框或者其“溢出”屬性具有“可見”以外的計算值，在哪種情況下，基線是底部邊緣邊緣。

（來自另一個主題的好答案）

相比之下，默認情況下浮動對齊在頂部。

Answer 3

在一條線上對齊

div {vertical-align: middle;}

Answer 4

添加float:left; 會解決這個問題，請看這里： http ： //jsfiddle.net/Z7z5Q/5/

還添加了vertical-align:top; 也將解決它： http ： //jsfiddle.net/Z7z5Q/7/

這是因為內聯塊在html中用空格表示奇怪。

對齊內聯塊的div

問題描述

4 個解決方案

解決方案1
4 已采納 2013-02-19 19:24:30

解決方案2
2 2013-02-19 19:19:56

解決方案3
1 2013-02-19 19:10:27

解決方案4
1 2013-02-19 19:40:21

對齊內聯塊的div

問題描述

4 個解決方案

解決方案1 4 已采納 2013-02-19 19:24:30

解決方案2 2 2013-02-19 19:19:56

解決方案3 1 2013-02-19 19:10:27

解決方案4 1 2013-02-19 19:40:21

解決方案1
4 已采納 2013-02-19 19:24:30

解決方案2
2 2013-02-19 19:19:56

解決方案3
1 2013-02-19 19:10:27

解決方案4
1 2013-02-19 19:40:21