html - 如何将 HTML 文本与图像的中心垂直对齐？

Question

如何使我的图像位于图像的中心？

我已将红色框放在我想要放置文本的位置，如下图所示：

图片 http://puu.sh/303Gs.jpg

这是我当前在 JSFiddle 中的代码

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

span.target{
    display:inline;
}

Answer 1

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>

Answer 2

使用垂直对齐

http://jsfiddle.net/hrvmG/3/

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

img {
    vertical-align: middle;
}

Answer 3

假设图片的大小是恒定的，您可以尝试：

<div class="item">
    <img src="..." alt=""/>
    <p>
        text to be sit in the middle
    </p>
</div>

CSS：

.item img
{
    height:100px;
    width:100px;
    float:left;
}
.item p
{
    display: table-cell;
    height: 100px;
    margin: 0;
    vertical-align: middle;
}

Answer 4

您可以style="vertical-align:middle;" 在图像和文本上使用。您可能还需要设置行高。

Answer 5

这应该工作

<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

Answer 6

试试这个..让你的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 像这样

span.target{
display:inline;
}
img{vertical-align:middle;}