將文本對齊到另一個元素的最佳方法？

Question

那麼，通常當我需要對齊框旁邊的文本，我這樣做： https://codepen.io/Maartinshh/pen/yMdNrW，但我聽說它使用 填充和邊距這種工作的可怕的錯誤。有其他選擇嗎？

<div class="box"></div> 
<div class="text">Text</div> 

.box{ 
    background-color:blue; 
    width: 70px; 
    height: 70px; 
} 

.text{ 
    padding-left: 80px; 
    margin-top: -40px; 
} 

Answer 1

對於你的榜樣，我會改變顯示類型inline-block，然後用vertical-align屬性來居中文本。

.box { 
 
    background-color: blue; 
 
    width: 70px; 
 
    height: 70px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="box"></div> 
 
<div class="text">Text</div>

第二種方法可能會使用flexbox。你可以用一個容器div的都和應用彎曲特性吧：

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

 
.box { 
 
    background-color: blue; 
 
    width: 70px; 
 
    height: 70px; 
 
}

<div class="wrap"> 
 
    <div class="box"></div> 
 
    <div class="text">Text</div> 
 
</div>

Answer 2

使用可以使用inline-block的和垂直對齊。

.box{ 
    background-color:blue; 
    width: 70px; 
    height: 70px; 
    display: inline-block; 
    vertical-align: middle; 
} 

.text{ 
    padding-left: 10px; 
    display: inline-block; 
    vertical-align: middle; 
}