使用css垂直對齊div和跨度

請參閱jsfiddle項目here。如何水平對齊框和標籤？使用css垂直對齊div和跨度

.box { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 30px; 
 
    border: 1px solid; 
 
} 
 

 
.legend { 
 
    horizontal-align: middle; 
 
}

<div class="legend"> 
 
    <div class="box" style="background-color: red;"> 
 
    </div> 
 
    <span>Alabama</span> 
 
</div>

來源

2016-10-06 Alex W.

你的意思是垂直對齊？ – Santi

像這樣對齊？ https://jsfiddle.net/Ahm7777/cckxkvov/2/ –

謝謝。你的方式也有效。 –

您可以浮動框，而不是內聯顯示它的。有幾種不同的方法來對齊這些。

https://jsfiddle.net/cckxkvov/5/

.box { 
    float: left; 
    height: 20px; 
    width: 30px; 
    border: 1px solid; 
} 

.legend { 
    horizontal-align: middle; 
} 

span { 
    display: inline-block; 
    line-height: 20px; 
}

來源

2016-10-06 19:56:13

很好用！謝謝！ –

這不是在CSS中垂直對齊元素的好方法。你一直在爲傳奇設計一個線條高度，並且已經有css屬性設計來完成這個（但更好）。 –

@SethWarburton我一直使用這個靜態內容。雖然我同意，但有很多方法可以達到同樣的結果。 –

爲什麼不使用Flexbox的？

如果你想垂直對齊內.legend兩個項目然後只需將這些樣式：

.legend { 
    display: flex; 
    align-items: center; 
}

請記住，您將需要申請前綴跨瀏覽器的兼容性。

來源

2016-10-06 19:56:55 Narutkowski

在.box div上設置vertical-align屬性似乎是最有意義並導致最少的問題。

.box { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 30px; 
 
    border: 1px solid; 
 
    vertical-align: middle; 
 
}

<div class="legend"> 
 
    <div class="box" style="background-color: red;"> 
 
    </div> 
 
    <span>Alabama</span> 
 
</div>

來源

2016-10-06 20:05:18 j08691

並不適合我。 –

@ AlexW.你能說一點嗎？除了'top'之外，還有其他的值需要嘗試。 – j08691

謝謝，是的，中間的作品好多了。 –

我假設你的意思是垂直對齊？如果您只是試圖垂直對齊兩個不等高的div，則顯示：inline-block是最簡單和最有效的方法。你幾乎擁有它的代碼，但浮動打破它。不要使用浮點數！

.box { 
 
    background-color: red; 
 
    border: 1px solid; 
 
    height: 20px; 
 
    width: 30px; 
 
} 
 

 
.box, 
 
.legend { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="box"></div> 
 
    <div class="legend">Alabama</div>

enter link description here

來源

2016-10-06 20:18:39

使用css垂直對齊div和跨度

回答

相關問題