Как я могу вертикально выровнять текст HTML с центром изображения?

Question

Как я могу сделать свое изображение в центре изображения?

Я поставил красные коробки, где я хотел бы, чтобы текст идти, как показано на этом изображении:

Img http://puu.sh/303Gs.jpg

Here's my current code in a 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

Вы можете использовать style="vertical-align:middle;" по изображению и тексту. Возможно, вам также потребуется установить высоту строки.

Answer 2

Можете ли вы разместить свой код, пожалуйста?

Это должно работать:

img { vertical-align: middle; } 

Answer 3

Использование вертикального выравнивания

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 4

это должно работать

<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 5

попробовать это .. сделать свой 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;} 

Answer 6

Если предположить, что размер изображения постоянен, вы можете попробовать:

<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 7

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>