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

Question

http://jsfiddle.net/PZ5AZ/

Пожалуйста, сообщите мне, что нужно сделать, чтобы сделать текст Отправить Vertical Выровнять по середине .also пожалуйста, сообщите, что эти проблемы не пришли в будущем, что я могу сделать?

Answer 1

, если вы хотите, чтобы центрировать текст внутри DIV по вертикали и по горизонтали, возможно, вы можете попробовать это

#container{ 
position:relative; 
width:200px; 
height:300px; 
border:1px solid #CCCCCC; 
} 
#txt{ 
position:absolute; 
width:150px; 
height:50px; 
top:50%; left:50%; 
margin-top:-25px; /* 1/2 of height */ 
margin-left:-75px;/* 1/2 of width */ 
border:1px solid #FF0000; 
} 

<div id="container"> 
    <div id="txt">My Text</div> 
</div> 

Answer 2

Попробуйте следующее: padding: 0px 0px 4px 0px;

Answer 3

Добавить это очистить по умолчанию кнопки отступы в Mozilla:

button::-moz-focus-inner { 
    border:0; 
    padding-top:0; 
} 

Answer 4

Вы не можете вертикальное выравнивание текста за пределами таблицы, так и есть два варианта:

Вы играете с дополнением родительского элемента для достижения иллюзии v-выровненного текста. Как пояснил г-н Лонг.

или

Вы делаете позицию родительского элемента: относительная; и абсолютный элемент ребенка:

<div id='container'> 
<div id='txt'>My Text</div> 
</div> 

#container{ 
position:relative; 
} 

#txt{ 
position:absolute; left:0px; top:50%; 
margin-top:10px; /* half the height of the text element */ 
} 

/* hint: for scaling attributes use %'s */ 

Я думаю, что первый вариант является самым простым в вашем случае.

Удачи вам!

W.

Answer 5

Как уже ранее сказал, вертикальное выравнивание не поддерживается действительно на что-либо, что не является ячейка таблицы.

Но если вы просто пытаетесь центрировать одну строку текста, вы можете использовать line-height. Если вы установите line-height так же, как и height элемента, и удалите все отступы, тогда текст будет отображаться в середине элемента, точно так же, как если бы он был выровнен по вертикали.

Так что на вашем примере следующий будет работать (если вы удалите стили по умолчанию первый):

line-height:28px; 
height:28px; 
padding:0px; 

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

Для более общего решения лучше всего использовать javascript для динамической разработки отступов, требуемых для конкретного элемента.