CSS - 對DIV

Question

我試圖垂直對齊一些文本的DIV這裏邊距： HTML：

<div class="div1"> 
    <div class="div11"> 
     <img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"> 
    </div> 
    <div class="div12"> 
     <a href="">yo</a> 
     </br> 
     <a href="">yo</a>    
    </div> 
</div> 

CSS：

.div1 { 
    height: 40px; 
} 

.div1 div { 
    display: inline-block; 
} 

.div12 { 
    padding-top: 5px; 
} 

的jsfiddle： http://jsfiddle.net/4mVPG/1/

高度我的div是固定的，所以我想要做的就是在最後一個div（.div12）上設置一個填充頂部以將文本向下移動一點。但是，當我添加一個填充頂部時，所有的框都被放下。

爲什麼會發生這種情況，我該如何解決這個問題？謝謝

Answer 1

當您使用inline-block時，每個塊的行爲就好像它在基線上獲取（默認情況下）的文本的位置。如果您增加第二個塊的高度，則基線將下降，並且第一個塊也會變小。

您可以使用vertical-align: top來更改它。

Answer 2

只是這種替換CSS：

.div1 { 
    height: 40px; 
} 

.div1 > div { 
    float: left; 
} 

.div12 { 
    padding: 0 0 0 3px; 
} 

的div1 div選擇也適用於所有的後代因此使用>僅適用於第一個。另外，如果容器高度固定，我認爲使用浮動更好。

JSFidle

希望它能幫助！

Answer 3

您可以使用「.div1 div {display: inline-block;vertical-align: top;}」，也沒有必要.div12 { margin-top: 30px; }因爲你想同時對準頂部和「文本格」

而且頂部沒有多餘的空間，只是爲了一個更好的做法，避免使用「<br> 「標籤，有很多」Block「標籤，例如<div>, <p>等，如果有」鏈接「列表，則使用」<ul><li>「，您可以使用CSS控制邊距和空格。

下面是更新後的代碼：

HTML

<div class="div1"> 
    <div class="div11"> 
     <img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/> 
    </div> 
    <div class="div12"> 
     <ul> 
      <li><a href="">yo</a> 
      </li> 
      <li> <a href="">yo</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

.div1 { 
    height: 40px; 
} 
.div1 div { 
    display: inline-block; 
    vertical-align: top; 
} 
.div12 ul, 
.div12 li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

工作搗鼓一樣的：http://jsfiddle.net/PK3UU/

希望這是有幫助的！

Answer 4

這是你想要的嗎？ http://jsfiddle.net/4mVPG/4/我清理CSS一點點

div { 
    height: 40px; 
    display: inline-block; 
    vertical-align:middle; 
} 

和HTML

<div class="div11"> 
    <img src="http://placekitten.com/40/40" alt="" width="40px" /> 
</div> 
<div class="div12"> 
    <a href="">yo</a> 
    <br /> 
    <a href="">yo</a> 
</div>