Як я магу вертыкальнае выраўноўванне HTML тэксту з цэнтрам малюнка?

Як я магу зрабіць мой вобраз у цэнтры малюнка?

Я паставіў чырвоныя скрынкі, дзе я хацеў бы, каб тэкст ісці, як паказана на гэтым малюнку:

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

Вось мой бягучы код у JSFiddle

<�Моцны> HTML



     'Mouse' - ' . Mouse . '

<�Моцны> CSS

span.target{
    display:inline;
}
1
CSS "> stackoverflow.com/questions/489340/…
дададзена аўтар Bongs, крыніца
@ User2417012 калі ласка, устаўце код тут або выкарыстоўваць JSFIDDLE
дададзена аўтар Praveen, крыніца
@DivTiwari Яго не маё пытанне. Вы згадалі няправільнае імя карыстальніка?
дададзена аўтар Praveen, крыніца
@DivTiwari Калі ласка, не шлюха за галасы. Гэта дрэнная форма.
дададзена аўтар Bojangles, крыніца
@ User2417012 Я рэдагаваў сваё пытанне ў нешта блізкае да таго, што павінна быць. Звярніце ўвагу на гэта ў будучыні - ваш арыгінальны пост быў вельмі нізкай якасці
дададзена аўтар Bojangles, крыніца
@ User2417012: Калі ласка, рэдагаваць і перафарматаваць ваша пытанне не ясна, якія праблемы вы сутыкнуліся.
дададзена аўтар Div Tiwari, крыніца
@Bojangles: калі ласка, увагу на вашым мове. Я заўважыў, што шмат хто з маіх адказаў, хоць яны былі правільнымі і прынята карыстальнікам, не пазначанымі як правільна, можа быць таму, што карыстальнікі былі новымі і не ведаючы, як тут. У любым выпадку дзякуй за Ваш каментар я вазьму яго да адказу і +1 для рэдагавання.
дададзена аўтар Div Tiwari, крыніца
Вось мой код: jsfiddle.net/DqHVs/1
дададзена аўтар user2417012, крыніца
«Вертыкальнага выраўноўвання: пасярэдзіне;" на малюнак зафіксаваў яго. Дзякуй за дапамогу
дададзена аўтар user2417012, крыніца

7 адказы

З дапамогай вертыкальнага выраўноўвання

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

HTML


Curabitur ligula non lectus.


Curabitur ligula non lectus.

CSS

img {
    vertical-align: middle;
}
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">
    
    
text to be sit in the middle text to be sit in the middle

</div>
1
дададзена

Вы можаце выкарыстоўваць стыль = "вертыкальнае выраўноўванне: сярэдні;" на малюнак і тэкст. Вам можа спатрэбіцца ўсталяваць вышыню радкі таксама.

0
дададзена

Мяркуючы, што памер малюнка сталы, вы можаце паспрабаваць:

<div class="item">
    
    
text to be sit in the middle

</div>

CSS:

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

паспрабаваць гэта .. зрабіць свой HTML, як гэта.



    'Mouse' - ' . Mouse . '

зрабіць свой CSS, як гэта

span.target{
display:inline;
}
img{vertical-align:middle;}
0
дададзена

Вы можаце размясціць свой код, калі ласка?

Гэта павінна працаваць:

img { vertical-align: middle; }
0
дададзена

гэта павінна працаваць

 //The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead)


 //css
0
дададзена