Центрирование чего-либо без полей

Можно ли центрировать что-то без использования margin: auto;? Мой div не может быть установленного размера, потому что ширина будет меняться в зависимости от его содержимого, и даже поэтому я не знаю, насколько он будет широким, так как текст внутри (есть div вокруг текста, потому что есть несколько <p> "S). Есть ли другой способ выравнивания по центру, не зная вашей ширины объекта?

div#contents {
 display: inline-block;
 margin: 50px 100px 50px 100px;
 border: 3px solid black;
}

table#socialmedia {
 height: 100px;
 margin-top: 10px;
 float: left;

}

table#support {
 height: 25px;
 margin-top: 10px;
 float: left;

}

table#external {
 margin-top: 10px;
 float: left;

}

div#footerdivider {
 width: 1px;
 height: 120px;
 margin: 0px 50px 0px 50px;
 background-color: #424242;
 float: left;
}

p.footerlinks {
 font-size: 20px;
 color: #8C8CFF;
 text-align: center;
<div id="contents">
 <table id="socialmedia">
  <tr><td><a href=""><p class="footerlinks">Facebook</p></a></td></tr>
  <tr><td><a href=""><p class="footerlinks">Twitter</p></a></td></tr>
  <tr><td><a href=""><p class="footerlinks">YouTube</p></a></td></tr>
  <tr><td><a href=""><p class="footerlinks">Steam</p></a></td></tr>
 </table>
 <div id="footerdivider">
 </div>
 <table id="support">
  <tr><td><a href=""><p class="footerlinks">Email Us (Click to copy)</p></a></td></tr>
 </table>
 <div id="footerdivider">
 </div>
 <table id="external">
 </table>
</div>

Источник

3 ответа

Решение

Чтобы выровнять по центру элемент без использования margin: 0 auto; Вы можете использовать flexbox, если браузеры, с которыми вы работаете, поддерживают его.

Рассмотрим следующий фрагмент;

.container {
    display: flex;
    justify-content: center;
    margin: 5px 0;
}
.item {
    background-color: red;
    border: 1px solid black;
}
<div class="container">
    <div class="item">Lorem ipsum dolor sit amet.</div>
</div>
<div class="container">
    <div class="item">Praesent ultrices nec quam at blandit. Pellentesque elementum ullamcorper lobortis.</div>
</div>

Есть хорошая статья о flexbox на @ css-tricks.com, которую вы можете проверить здесь.

Надеюсь, это поможет вам!

Источник

Пытаться

div.your_element {
  display: table;
  margin: 0 auto;
}

дисплей: таблица (для центрирования жидкости

поле: 0 авто (по центру таблицы)

Источник

Я подумаю, если вы установите поле на авто. Обычно работает по горизонтали.

div {
      margin: auto;

}
Источник
Другие вопросы по тегам