[英]How to vertically align an image inside a <h1> tag
HTML HTML
<h1>abc abc<span><img class="goldT" src="btns/nav02.png"></span></h1>
css CSS
h1{
margin:15px 0 15px 20px;
font-size:1.1rem;
font-weight:bold;
background:#e1e1e1;
padding-left:10px;
color: #444444;
}
h1 span{
float:right;
margin-right:14px;
}
h1 .goldT{
width:140px;
vertical-align:middle;
}
How can I keep img goldT
vertically centered with header text abc
. 如何使用标题文本abc
保持img goldT
垂直居中。
Try: 尝试:
HTML: HTML:
<h1>
<span class="text">abc abc</span><span class="span">
<img class="goldT" src="https://www.google.com/images/srpr/logo11w.png">
</span>
</h1>
CSS: CSS:
.span, .text {
vertical-align:middle;
display:table-cell;
}
h1 {
display:table;
width:100%;
}
Try this here we can make image vertically center 试试这里我们可以使图像垂直居中
Try this http://jsfiddle.net/SxxWV/10/ 试试这个http://jsfiddle.net/SxxWV/10/
HTML HTML
<div class="main">
<div class="box"><img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
CSS CSS
.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:transparent; }
/* for centering */
img{width:100px}
.box { display: inline-block; width:100px }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }
A much simpler solution is as follows: 一个更简单的解决方案如下:
<h1><span>abc abc</span><img class="goldT" src="btns/nav02.png"></h1>
On the h1 set a line-height
and on the image and span set a vertical-align:middle;
在h1上设置一个line-height
,在图像和跨度上设置一个vertical-align:middle;
. 。 Worked for me. 为我工作。
you need to set css display style and vertical-align for the <h1>
你需要为<h1>
设置css显示样式和vertical-align
see demo : http://jsfiddle.net/BhaveshKachhadiya/REHLZ/3/embedded/result/ 见演示: http : //jsfiddle.net/BhaveshKachhadiya/REHLZ/3/embedded/result/
Css for h1 : h1的 Css:
h1{
margin:15px 0 15px 20px;
display:table-cell;
vertical-align:middle;
font-size:1.1rem;
font-weight:bold;
background:#e1e1e1;
padding-left:10px;
color: #444444;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.