CSS: using text-align: center in span

Для приложения для календаря, я хочу, чтобы знакомый вид названия месяца был центрирован левой стрелкой в левом поле, чтобы вернуться в месяц, а справа - вправо маржа для продвижения вперед в месяц. Что-то вроде < May >CSS: using text-align: center in span

<Div> сек вставить разрыв строки в конце, так что я думал, что я хотел бы использовать срок, за исключением диапазона является встроенным элементом, так что text-align: center свойства только выравнивает его в пределах длины месяца. Только с помощью text-align: center производит что-то вроде <May >

Чтобы компенсировать это, я добавил display: block в пролете, однако, это создает разрыв строки в конце, то есть

<  May 
       >

Может кто-нибудь предложить правильный способ сделать это?

Последняя версия:

CSS/HTML:

span.previous { 
 
    float:left; 
 
} 
 
span.next { 
 
    float:right;  
 
} 
 
span.month { 
 
    display:block; 
 
    text-align:center; 
 
}

<span class="previous"><img src="leftarrow.gif"></span> 
 
<span class = "month">May</span> 
 
<span class="next"><img src="rightarrow.gif"></span>

источник

2013-05-13 user1904273

Почему вам нужно 'дисплей: блок;', если вы хотите, чтобы выровнять все рядный? –

, потому что иначе text-align не работает. Пример примера – user1904273

Возможный дубликат [Как центрировать элемент span в CSS?] (Https://stackoverflow.com/questions/15324452/how-to-center-a-span -element-in-css) –

Вы должны применить текст выравнивать к элементу контейнера, и удалить display:block (выравнивания текста работает с элементами inline/inline-block). И не забудьте очистить поплавки после контейнера.

fiddle

источник

2013-05-13 11:17:22

Этого достаточно, зачем использовать поплавки и очистки и все прочее. http://jsfiddle.net/C3Wxf/ –

Похоже, что OP хочет иметь полную ширину для этого, со стрелками по краям, возможно что-то [подобное] (http://jsfiddle.net/kkJ8e/1/) –

Это сработало. Я думаю, что ответ на мой оригинальный вопрос заключается в том, что вы можете только выравнивать текст в div ... вы не можете сделать это в промежутке. FYI, я пробовал использовать встроенный блок и добавлял ширину, но это тоже не сосредотачивалось. – user1904273

Один из способов создать свой календарь заголовок может быть следующим. В моем примере (this fiddle) я использовал звездочку вместо изображения. Я заменил месяц на абзац и изменил порядок разметки.

Звездочки или изображения будут храниться по бокам и месяц посередине в гибком дизайне. См. Это fiddle.

#header { 
 
    background:#e0e0e0; 
 
} 
 
span.previous { 
 
    float:left; 
 
} 
 
span.next { 
 
    float:right;  
 
} 
 
p.month { 
 
    text-align:center; 
 
}

<div id="header"> 
 
    <span class="previous">**</span> 
 
    <span class="next">**</span> 
 
    <p class = "month">May</p> 
 
</div>

источник

2013-05-13 11:41:10 Fico

CSS: using text-align: center in span

ответ

Смежные вопросы