[英]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>
只需添加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>
添加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;
}
检查以下代码,这可能对您有帮助。
.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>
我通过显示看到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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.