Align text and icon-font icon in span at center of parent div
Question
I´m trying to align some text in a <span> tag inside a div container. 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 ?
.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 ?
.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 answers
solution1
2 ACCPTED 2016-03-02 09:33:09
Just add display: flex; and align-items: center; to .container-content will make you text vertically center inside container.
And if you want to increase margin from left the change in following css:
.container-content span {
margin-left: 5px;
}
Edit:
Just remove line-height from icon else every thing is ok. 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>
solution2
1 2016-03-02 09:34:04
Add line-height: 40px; to .container-content (this is not useful if span has multiple lines.)
.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;
}
solution3
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>
solution4
1 2016-03-02 09:45:17
i see 2 easy options via display:
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.