Замена для <center>
Об этом спрашивали другие люди, но я никогда не видел адекватного ответа. Есть ли действительная замена тега <center>
?
Я знаю там margin: 0 auto;
, но для этого требуется установить ширину. Там также align="center"
, но я считаю, что этот неверный код.
Есть ли что-то такое же простое, как <center>
, что действительно? Есть редкие случаи, когда я все еще использую его, хотя он устарел. Только сегодня я закончил использование <center>
для центровки одной кнопки, которая была сосредоточена на веб-странице. Да, я мог бы установить ширину и дать ей margin: 0 auto
, но это много работы для центрирования одного элемента, и он загружает мой код, и я горжусь тем, что он упорядочен. Я действительно не понимаю, почему <center>
был устаревшим в первую очередь, если ничего не заменило его.
Спасибо!
Ответы
Ответ 1
text-align: center
- это то, что вы должны использовать. Фактически, идеальный способ заключается в следующем:
.center {
text-align: center;
}
.center > div, .center > table /* insert any other block-level elements here */ {
margin-left: auto;
margin-right: auto;
}
Очевидно, это не так просто, как вы могли бы надеяться.
Лично я просто использую:
.center {text-align: center;}
.tmid {margin: 0px auto;}
Затем примените классы, где это необходимо.
Ответ 2
Не так легко центрировать элементы без центральной метки.
Для этого вам нужно сделать обходной путь, который работает даже в IE6:
Вам нужна обертка div вокруг элемента, который вы хотите центрировать, и используйте text-align:center; width:100%
.
Внутри этого div вы поместите другой div и установите margin
в auto и text-align:left;
<div style="text-align:center; width:100%">
<div style="margin:auto; text-align:left;">
This Container is centered
</div>
</div>
Если вы хотите просто выделить текст центра, вы можете использовать <p style="text-align:center;"></p>
Это ядро. Чтобы упростить эту вещь, вы можете использовать для этого класс (например, Kolink написал):
CSS
.center {
text-align:center;
width:100%;
}
.center:first-child { //doesn't work in IE 6
margin:auto;
text-align:left;
}
HTML:
<div class="center">
<div>
This Container is centered
</div>
</div>
Ответ 3
для центральных элементов я использую это:
.middlr {
display: block;
margin: auto;
}
работает для каждого/любого элемента. работает для меня.
Ответ 4
Причина, по которой <center>
устарела, заключается в том, что она не является семантическим тегом, а скорее презентационным, и мы должны избегать использования чего-либо в HTML, который не является семантическим по своей природе.
По той же причине, что другие элементы представления, такие как <b>
, <i>
и т.д., устарели, так как существуют способы достижения этого в CSS.
Ответ 5
Замена для центрального тега: (вы должны сделать оба)
Используйте этот стиль для родительского элемента:
выравнивания текста: центр;
Используйте этот стиль для текущего элемента:
margin-left: auto; margin-right: auto;
Ответ 6
.centered {
margin-left: auto !important;
margin-right: auto !important;
}
* > .centered {
text-align: center !important;
display: block;
}
Ответ 7
Я нашел этот ответ в блоге
<img src="bullswithhorns.jpg" alt="Michael with the bull" style="width:150px;height:200px;margin:0px auto;display:block">
Ответ 8
text-align: center
является эквивалентным CSS
Ответ 9
это предложение PHP-STORM:
используйте это:
<div style="text-align: center;"></div>