how to align text and image verticle middle in div
Question
How can i align text and image verticle align middle ??
jsfiddle demo here : http://jsfiddle.net/j3wDP/
My CSS:
.rating{
border: 1px solid red;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
My HTML:
<body>
<div class="rating">Rating <span><img src="like.jpg">233<img src="dislike.jpg">100</span></div>
</body
5 answers
solution1
1 ACCPTED 2012-02-23 08:02:33
solution2
1 2012-02-23 08:15:41
Demo
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
line-height:50px;
height: 50px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
}
You can use line-height
solution3
0 2012-02-23 08:01:31
Change your css like this
.rating{
border: 1px solid #8e8e8e;
font-family: verdana;
font-size: 12px;
width: 180px;
height: 20px;
line-height:20px;
}
span img{
width: 20px;
height: 20px;
padding: 0px 3px;
vertical-align:middle;
}
solution4
0 2012-02-23 08:24:35
最好的方法是使用Line-height或我们可以使用
.rating{ display:table-cell; vertical-align:middle; }
solution5
0 2012-02-23 08:28:18
There are different solutions. You can wrap your content into two (eg div-)containers and handle them like a table. Something like that:
<div style="display:table; height: 200px; background:red;">
<div style="display:table-cell; height:200px; vertical-align:middle">
<span>Your Content</span>
</div>
</div>
it's important to give them a height property and use display: table and display:table-cell instead of it. another way is to center this span with position: absolute:
<div style="height:200px; background:red; position:relative">
<span style="height:20px; position:absolute; top:50%; margin-top:-10px;">Your content</span>
</div>
In that example the margin-top value is calculated by the half value of the height (height: 20px = margin-top:-10px). But I would prefer the first way.
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.