[英]How can I vertically align HTML text with the center of an image?
How can I make my image in the center of the image? 如何使图像位于图像的中心?
I have put red boxes where I'd like the text to go, as shown in this image: 我将红色框放到我想要的文本位置,如下图所示:
Img http://puu.sh/303Gs.jpg 图http://puu.sh/303Gs.jpg
Here's my current code in a JSFiddle 这是我在JSFiddle中的当前代码
HTML HTML
<img src="http://media.steampowered.com/steamcommunity/public/images/avatars/ef/ef866067efc58dc49c7de0a39622eb5d7b6532bd_medium.jpg" />
<span class="target">
<b> <a href="#"/>'Mouse'</a></b> - ' . Mouse . '<br />
</span>
CSS CSS
span.target{
display:inline;
}
Use vertical-align 使用垂直对齐
http://jsfiddle.net/hrvmG/3/ http://jsfiddle.net/hrvmG/3/
HTML HTML
<p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/64px-Smiley.svg.png" />
Curabitur ligula non lectus.
</p>
<p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/64px-Smiley.svg.png" />
Curabitur ligula non lectus.
</p>
CSS CSS
img {
vertical-align: middle;
}
IN CSS
=================
.comtent img
{
height:200px;
width:200px;
float:left;
margin-right:20px;
}
.comtent p
{
height: 200px;
width:200px;
margin: 0;
display: table-cell;
vertical-align: middle;
}
IN HTML
==================
<div class="comtent">
<img src="image/App_Sec2.jpg" alt=""/>
<p>
text to be sit in the middle
text to be sit in the middle
</p>
</div>
You could use style="vertical-align:middle;"
您可以使用
style="vertical-align:middle;"
on Image and Text. 在图像和文本上。 You may need to set the line-height too.
您可能还需要设置行高。
this should work 这应该工作
<img src=".gif" align="middle"> //The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead)
<img src=".gif" style="vertical-align:middle;"> //css
try this.. make your html like this. 试试这个..让你的HTML这样。
<img src="http://media.steampowered.com/steamcommunity/public/images/avatars/ef/ef866067efc58dc49c7de0a39622eb5d7b6532bd_medium.jpg" />
<span class="target">
<b> <a href="#">'Mouse'</a></b> - ' . Mouse . '<br />
</span>
make your css like this 使你的CSS像这样
span.target{
display:inline;
}
img{vertical-align:middle;}
Assuming the size of the picture is constant, you could try: 假设图片的大小是恒定的,您可以尝试:
<div class="item">
<img src="..." alt=""/>
<p>
text to be sit in the middle
</p>
</div>
CSS: CSS:
.item img
{
height:100px;
width:100px;
float:left;
}
.item p
{
display: table-cell;
height: 100px;
margin: 0;
vertical-align: middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.