Как сделать css-макет подходящим для содержимого html?

Question

У меня есть макет, похожий на:

<div> 
    <table> 
    </table> 
</div> 

Я хотел бы для DIV только расширить, чтобы так широко, как моя таблица становится. Мой CSS:

.content { 
    text-align: center; 
    height: auto; 
    width: auto; 
    -moz-border-radius:30px; 
    -webkit-border-radius:30px; 
    border-radius:30px; 
    border: #solid 10px #000; 
    background-color: rgba(105,100,100,0.8); 
      } 

Я попытался добавить display: inline-block это работает, но он устанавливает моей table слева от осыпи, вот скриншот: image Я хочу, чтобы быть в центре, а также, как я могу это сделать?

Answer 1

Добавить text-align: center к вашему телу (при условии div является прямым потомком вашего body тега)

body 
{ 
    text-align: center; 
} 

(в вашем CSS стилей)

Answer 2

Вы могли бы работать с переводить здесь.

.content{ 
    left: 50%; 
    transform: translateX(-50%); 
} 

Answer 3

Добавить text-align: center к родительскому элементу div с display:inline-block