Замена для <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>