охват не вертикально выравнивая текст в середине - PullRequest
Новая
       1

охват не вертикально выравнивая текст в середине

5 голосов
/ 08 февраля 2012

Все, у меня есть следующий код: 

<span style="width:450px; height:207px; display:inline-block; vertical-align:middle; padding:0 0 0 10px; text-align:left;">
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish   
</span>

Отображает текст, но текст всегда выравнивается сверху.Любая идея о том, как центрировать текст в середине диапазона?

Ответы [ 4 ]

18 голосов
/ 08 февраля 2012

Используйте в стиле span line-height:207px для выравнивания по вертикали.

10 голосов
/ 08 февраля 2012

Используйте DIV и display:table-cell

<div style="width:450px; height:207px; display:table-cell; vertical-align:middle; padding:0 0 0 10px; text-align:left;border:1px solid #ff0000">
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish   
</div>
3 голосов
/ 08 февраля 2012 
<style>
span {
    width: 450px;
    height: 207px;
    display: table-cell;
    padding-left: 10px;
    text-align: left;
    vertical-align: middle;
}
</style>
<span>
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish
</span>
0 голосов
/ 08 февраля 2012

Это получится. Я добавил рамку, чтобы сделать ее более заметной. 

<span style="width:450px; height:207px;  display:table-cell; vertical-align:middle; padding:0 0 0 10px; text-align:left; border: solid 1px #000; ">
<b>Recipe Added By:</b> Test Person<br>
<b>Prep Time:</b> aljsdf<br>
<b>Cook Time:</b> asldfjdsf<br>
<b>Recipe Yield:</b> asflja<br>
<b>Recipe Category:</b> Main Dish   
</span>
...