2012-03-03 2 views
0

Я не могу центрировать текст, используя следующий код. Какую ошибку я делаю? и есть ли лучшая альтернатива?как центрировать текст

<html> 
<body> 
<table> 
<tr ><td id="azone" colspan=3 style="border:1px solid black"><span style="border:1px solid black;background-color:green;margin:auto;" >Tense</span></td> </tr> 
<tr > <td style="width:250px"></td> <td style="width:250px"></td> <td style="width:250px"> </td></tr> 
<tr> <td></td> <td></td> <td> </td></tr> 
</table> 
</body> 
</html> 

ответ

1

Вы пробовали выравнивания текста: центр (CSS)?

Вы также можете использовать теги < >. Хотя это не рекомендуется, поскольку они устарели.

+1

код [ 'center' элемент осуждается в HTML4.01] (HTTP: //www.w3 .org/TR/html4/index/elements.html) и не должны использоваться. – FelipeAls

+0

Спасибо, я отредактировал свой ответ, чтобы отразить это. – vanneto

3

Вы пытаетесь использовать margin: auto для центрирования текста, но это работает только с блочными CSS-элементами, которые <span> - нет. В результате margin: 0 auto не влияет на ваш тег display: inline<span>. В этом случае вы хотите text-align: center.

Также обратите внимание, что я переместил некоторые из ваших стилей в тег <style> в начале документа. Это гораздо более организованный способ управления стилями CSS и поможет избежать будущих головных болей при редактировании кода.

Измените текущий код для этого, и вы должны быть в порядке:

<html> 
<body> 
<style> 
tr td span { 
    border:1px solid black; 
    background-color:green; 
    text-align: center; 
}  
</style> 

<table> 
<tr ><td id="azone" colspan=3 style="border:1px solid black" >Tense</span></td> </tr> 
<tr > <td style="width:250px"></td> <td style="width:250px"></td> <td style="width:250px"> </td></tr> 

+0

Можете ли вы подробнее рассказать о блочных элементах Брайана? Какие еще уровни существуют? Спасибо –

+0

Атрибуты уровня блока определяются свойством CSS 'display'. Наиболее распространенными являются 'display: inline' (который по умолчанию наследует ваш тег' '),' display: block' и 'display: inline block'. Вы можете прочитать больше здесь http://www.webdesignfromscratch.com/html-css/css-block-and-inline/ – Brian

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