在父div中心的范圍內對齊文本和圖標字體圖標
[英]Align text and icon-font icon in span at center of parent div
問題描述
我正在嘗試在div容器內的<span>標記中對齊一些文本。 文本應位於容器的垂直中心，並且距左邊界幾像素。 到左邊的距離沒什么大不了，但是如何將文本放在其父<div>容器的垂直中心？
.container{
border: 1px solid red;
height: 50px;
width: 100px;
}
.container-content{
height: 40px;
border: none;
border-left: 1px solid black;
border-right: 1px solid black;
margin-top: 5px;
margin-left: 3px;
margin-right: 3px;
}
.container-content span{
margin-left: 2px;
}
<div class="container">
<div class="container-content">
<span>Text<span>
</div>
</div>
編輯
所有建議的答案都適用於文本，但是如果我使用圖標字體，則圖標不會位於中間。 如何使用Google的Material-icon字體解決此問題？
.container { border: 1px solid red; height: 50px; width: 100px; } .container-content { height: 40px; border: none; border-left: 1px solid black; border-right: 1px solid black; margin-top: 5px; margin-left: 3px; margin-right: 3px; display: flex; align-items: center; } .container-content span { margin-left: 5px; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="container"> <div class="container-content"> <span><span><i class="material-icons">check_circle</i><span> </div> </div> </body> </html>
4 個解決方案
解決方案1
2 已采納 2016-03-02 09:33:09
只需添加display: flex; 和align-items: center; 到.container-content將使您在容器內的文本垂直居中。
而且，如果您想從左邊增加邊距，請更改以下CSS：
.container-content span {
margin-left: 5px;
}
編輯：
只需從圖標中刪除line-height ，否則一切正常。 它是顯示中心。
.container { border: 1px solid red; height: 50px; width: 100px; display: flex; align-items: center; } .container-content { height: 40px; border: none; border-left: 1px solid black; border-right: 1px solid black; margin-left: 3px; margin-right: 3px; display: flex; align-items: center; width:100%; } .container-content span { margin-left: 5px; } .material-icons{ line-height:unset !important; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="container"> <div class="container-content"> <span><span><i class="material-icons">check_circle</i><span> </div> </div> </body> </html>
解決方案2
1 2016-03-02 09:34:04
添加line-height: 40px; 到.container-content （如果span具有多行，則沒有用。）
.container-content{
line-height: 40px;
border: none;
border-left: 1px solid black;
border-right: 1px solid black;
margin-top: 5px;
margin-left: 3px;
margin-right: 3px;
}
解決方案3
1 2016-03-02 09:41:40
檢查以下代碼，這可能對您有幫助。
.container{ border: 1px solid red; height: 50px; width: 100px; } .container-content{ height: 40px; border: none; border-left: 1px solid black; border-right: 1px solid black; margin-top: 5px; margin-left: 3px; margin-right: 3px; align-items: center; display: flex; } .container-content span{ margin-left: 2px; }
<div class="container"> <div class="container-content"> <span>Text</span> </div> </div>
解決方案4
1 2016-03-02 09:45:17
我通過顯示看到2個簡單的選項：
.container { height:50px; width:100px; box-sizing:border-box; border:solid; display:flex; padding:5px 3px; } .container-content { margin:auto ; text-align:center; width:100%; padding:0 2px; border-left: 1px solid black; border-right: 1px solid black; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container"> <div class="container-content"> <span><span><i class="material-icons">check_circle</i></span> </span> </div> </div>
要么
.container { height: 50px; width: 200px; border: solid; display: table; border-spacing: 3px 5px; } .container-content { display: table-cell; vertical-align: middle; text-align: center; border-left: 1px solid black; border-right: 1px solid black; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container"> <div class="container-content"> <span><span><i class="material-icons">check_circle</i></span> </span> </div> </div>
text-align：center不能完美居中我的Font Awesome圖標
[英]text-align:center doesn't perfect center my Font Awesome icon
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.