CSS - 包裝文本的行高填充不是我所期望的

Question

有一些問題得到正確的CSS以我想要的方式對齊文本。

。 html文件

<section id='a'> 
    <div class='b'>111</div> 
    <div class='b'>222</div> 
    <div class='b'>33333</div> 
    <div class='b'>444444 4444</div> 
    <div class='b'>55555</div> 
</section> 

。 CSS文件

#a { 
    position: fixed; 
    top: 50%; 
    left: 5vw; 
    transform: translateY(-50%); 
} 
.b { 
    position: relative; 
    margin: 5px; 
    height: 56px; 
    width: 56px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 56px; 
    font-size: 14pt; 
    color: #696969; 
    background-color: #D3D3D3; 
    border-radius: 30px; 
    cursor: pointer; 
    border: 2px solid #000000; 
} 

事情顯示，除了DIV 4具有較長的文本綿延外部的微小。

我添加了一個類來改變行高，使文本換行：

<div class='b c'>444444 4444</div> 

.c { 
    line-height: 28px; 
} 

我想，以減少線路之間的間距，使文本有圈內更適合：

.c { 
    line-height: 18px; 
} 

我喜歡的間距，但想在文本向下移動到中心，所以我說的邊界內一些填充：

.c { 
    line-height: 18px; 
    padding-top: 6px; 
    padding-bottom: 0px; 
} 

圓擴展成更多的橢圓型形狀的。

高度明確表示爲56px。

的餘量是5像素（X2爲頂部和底部）：10px的

邊框是2px的（X2爲頂部和底部）：4像素

含量用線高度纏繞兩行文字18px（x2）：36px

添加6px的填充效果爲56px，這是指定的高度，所以我不清楚爲什麼填充會擴大高度。

看着行高有點，顯然我不明白這是如何工作的。我嘗試了許多其他設置和值，但沒有給我想要的結果。

Chrome，Firefox，Opera和Safari中的行爲相同。

任何想法，方向或澄清我做錯了什麼？

Answer 1

的div的大小56x56像素。一旦你添加任何填充（padding-top: 6px），它將加起來56px，這將導致62px。你的div（圈）將成爲一個雞蛋。你需要做的是在div上設置box-sizing: border-box。

box-sizing的初始值是內容框。您輸入的高度是內容的高度。任何填充和邊框都不包含在該值中，並會擴展div。另一方面，即使在輸入填充後，也會保留div 56px。它會減少內容的高度，並保持框在相同的高度。

#a { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 5vw; 
 
    transform: translateY(-50%); 
 
} 
 
.b { 
 
    position: relative; 
 
    margin: 5px; 
 
    height: 56px; 
 
    width: 56px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 56px; 
 
    font-size: 14pt; 
 
    color: #696969; 
 
    background-color: #D3D3D3; 
 
    border-radius: 30px; 
 
    cursor: pointer; 
 
    border: 2px solid #000000; 
 
} 
 
.c { 
 
    line-height: 28px; 
 
    line-height: 18px; 
 
    box-sizing: border-box; 
 
    padding-top: 9px; 
 
}

<section id='a'> 
 
    <div class='b'>111</div> 
 
    <div class='b'>222</div> 
 
    <div class='b'>33333</div> 
 
    <div class='b c'>444444 4444</div> 
 
    <div class='b'>55555</div> 
 
</section>

Answer 2

display: table; and display: table-cell;是一個很好的垂直對齊解決方案，不管子元素的屬性如何。

.container { 
 
    display: table; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.one { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.two { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.three { 
 
    width: 75px; 
 
    height: 75px; 
 
}

<div class="container one"> 
 
    <span>some text</span> 
 
</div> 
 

 
<div class="container two"> 
 
    <span>some other text</span> 
 
</div> 
 

 
<div class="container three"> 
 
    <span>some text that stretches longer</span> 
 
</div>

Answer 3

padding計數朝向元件尺寸。所以height: 56px和padding-top: 6px將使元件62px爲高。只需將該元素的height調整爲50px（期望高度減去垂直填充，56-6）。

另一種選擇是將box-sizing更改爲border-box（默認值爲content-box）。這將使padding和border-width由width考慮和height - https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

Answer 4

你可以做這樣的事情：

.b { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

，並添加包裝與

transform-style: preserve-3d; 

Answer 5

您可以使用flexbox，那裏是沒有必要calc下的線條和填充匹配針對大小，這所有這一切動態。

#a { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 5vw; 
 
    transform: translateY(-50%); 
 
} 
 
.b { 
 
    position: relative; 
 
    margin: 5px; 
 
    height: 56px; 
 
    width: 56px; 
 
    font-size: 14pt; 
 
    color: #696969; 
 
    background-color: #D3D3D3; 
 
    border-radius: 30px; 
 
    cursor: pointer; 
 
    border: 2px solid #000000; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    overflow: hidden; 
 
}

<section id='a'> 
 
    <div class='b'>111</div> 
 
    <div class='b'>222</div> 
 
    <div class='b'>33333</div> 
 
    <div class='b'>444444 4444</div> 
 
    <div class='b'>55555</div> 
 
</section>