Ответ 1
Центр выравнивания текста охватывает большинство текстовых элементов, но требуется немного больше, чтобы центрировать выравнивание таблицы.
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
Я знаю, что этот вопрос задавался много раз, но я никогда не видел удовлетворительного ответа. Я имею в виду ответ, который действительно работает.
Итак, здесь мы идем снова. Возьмите этот jsFiddle: http://jsfiddle.net/KFMyn/3/
Если вы удалите align="center"
из HTML, какой CSS вам нужно использовать, чтобы результат выглядел так же, как оригинал?
Ответы, которые я нашел обычно, составляют margin:0 auto
и/или text-align:center
, но ни один из них не имеет желаемого эффекта, чтобы результат выглядел так же, как оригинал.
Центр выравнивания текста охватывает большинство текстовых элементов, но требуется немного больше, чтобы центрировать выравнивание таблицы.
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
div {width:400px; text-align: center;}
table {display:inline-block;}
Должен работать и в дополнение к Павлу.
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Работает для меня. Но это может работать некорректно, если у вас есть несколько вложенных элементов dom
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 (класс начальной загрузки)
Вы также можете попробовать создать стиль таблицы, например:
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
Почему бы просто не оставить его <div align="center">
Насколько я знаю, он по-прежнему отлично работает со всеми браузерами. У меня много старого html, и я попал в эту ветку только потому, что моя IDE NetBeans предупреждает меня, что это устарело. Я предполагаю, что браузеры автоматически переводят правильное решение. То же самое с <font size="6">bla bla</font>
все еще работает отлично и, вероятно, автоматически преобразуется в <span style="font-size:36px">bla bla</span>
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; }