Замена CSS для <div align = "center" >

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

Итак, здесь мы идем снова. Возьмите этот jsFiddle: http://jsfiddle.net/KFMyn/3/

Если вы удалите align="center" из HTML, какой CSS вам нужно использовать, чтобы результат выглядел так же, как оригинал?

Ответы, которые я нашел обычно, составляют margin:0 auto и/или text-align:center, но ни один из них не имеет желаемого эффекта, чтобы результат выглядел так же, как оригинал.

Ответ 1

Центр выравнивания текста охватывает большинство текстовых элементов, но требуется немного больше, чтобы центрировать выравнивание таблицы.

div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

http://jsfiddle.net/NYuv8/4/

Ответ 2

div {width:400px; text-align: center;}
table {display:inline-block;}

Должен работать и в дополнение к Павлу.

http://jsfiddle.net/KFMyn/13/

Ответ 3

div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }

Работает для меня. Но это может работать некорректно, если у вас есть несколько вложенных элементов dom

Ответ 4

    margin: 0 auto; 
    text-align: center;

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

<div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

Вы можете поставить любой столбец, как col-sm-2, 3, 4....... 12

Замена для Центрального тега в разных ситуациях

1. text-center Работает с тегами p, a, button, h и другими, т.е. со всеми тегами, содержащими данные или текст напрямую

2. Гибкость. Может использоваться для выравнивания целого элемента внутри другого элемента, однако имеет больше утилит для проверки документации для справки.

Используйте можно центрировать элементы, используя flex следующим образом

display:flex;
justify-content:center;
align-items:center;

Еще одно свойство импорта - это flex-direction, т.е.

flex-direction:column
flex-direction:row

Используйте гибкое направление в соответствии с типом выравнивания, который вы хотите

3. mx-auto (класс начальной загрузки)

Ответ 5

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

div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}

Ответ 6

Почему бы просто не оставить его <div align="center"> Насколько я знаю, он по-прежнему отлично работает со всеми браузерами. У меня много старого html, и я попал в эту ветку только потому, что моя IDE NetBeans предупреждает меня, что это устарело. Я предполагаю, что браузеры автоматически переводят правильное решение. То же самое с <font size="6">bla bla</font> все еще работает отлично и, вероятно, автоматически преобразуется в <span style="font-size:36px">bla bla</span>

Ответ 7

div { width: 400px; text-align: center; }
table { display: inline-block; }

Это должно работать. Проверьте пример здесь: http://jsfiddle.net/ye7ngd3q/2/

и если вы хотите, чтобы элементы внутри ячейки таблицы были выровнены влево/вправо, то вы можете определить отдельные классы и назначить элементу соответственно, как показано ниже:

HTML

<div align="center">
   A centered div
   <p>A</p>
   <table border="1">
     <tr><td class="align-left">centered</td><tr>
     <tr><td class="align-right">div</td><tr>
   </table>
   <ul><li>A centered div</li></ul>
</div>

CSS

div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }