在父div中心的范围内对齐文本和图标字体图标
[英]Align text and icon-font icon in span at center of parent div
问题描述
I´m trying to align some text in a <span> tag inside a div container. 
我正在尝试在div容器内的<span>标记中对齐一些文本。 The text should be at the vertical center of the container and several pixels away from the left border. 文本应位于容器的垂直中心，并且距左边界几像素。 The distance to the left was no big deal but how can I place my text at the vertical center of his parent <div> container ? 到左边的距离没什么大不了，但是如何将文本放在其父<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>
EDIT 编辑
All the suggested answers are working great with text but if I use a icon-font the icon isn´t placed at the center. 所有建议的答案都适用于文本，但是如果我使用图标字体，则图标不会位于中间。 How to fix this issue with googles material-icon font ? 如何使用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
Just add display: flex; 只需添加display: flex; and align-items: center; 和align-items: center; to .container-content will make you text vertically center inside container. 到.container-content将使您在容器内的文本垂直居中。
And if you want to increase margin from left the change in following css: 而且，如果您想从左边增加边距，请更改以下CSS：
.container-content span {
margin-left: 5px;
}
Edit: 编辑：
Just remove line-height from icon else every thing is ok. 只需从图标中删除line-height ，否则一切正常。 It is display center. 它是显示中心。
.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
Add line-height: 40px; 添加line-height: 40px; to .container-content (this is not useful if span has multiple lines.) 到.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
check with this below code it may help you. 检查以下代码，这可能对您有帮助。
.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
i see 2 easy options via display: 我通过显示看到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>
or 要么
.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.