Содержимое центра и размерность?

Я хочу, чтобы центр div находился в середине моей страницы, и чтобы div соответствовал содержимому. Как я могу это сделать?

Я пробовал

width: 1px;
white-space: nowrap;
margin: 0 auto;

Который центрирует div, но тогда весь текст справа от него.

display: inline-block делает div подходящим для содержимого, но тогда margin: 0 auto;, похоже, не работает...

Ответ 1

Это работает для вас: http://vidasp.net/tinydemos/inline-centered-div.html

body { text-align:center; }
div { display:inline-block; }

Ответ 2

Как правило, если вы хотите центрировать некоторый текст, вы должны использовать контейнер, который охватывает контейнер, в котором вы центрируетесь, и установите text-align: center;.

CSS

#container {
    text-align: center;
}

HTML: мой текст

Если вы хотите, чтобы контейнер, размер которого был вокруг текста, для фона фона или границы, вставьте в другой внутренний контейнер.

CSS

#container {
    text-align: center;
}

#inner_div {
    display: inline;
    /*other styles here*/
}

HTML:

<div id="container">
    <div id="inner_div">my text</div>
</div>

Ответ 3

Итак, у вас есть два варианта. Если вам на самом деле не нужно, чтобы div соответствовал содержимому, и вы просто хотите, чтобы контент центрировался без указания ширины для div, вы можете просто сделать следующее:

<div style="display: flex; justify-content: center;">
    <input type="button" value="Example Button" />
</div>

Однако, если вы на самом деле хотите, чтобы ваш контент содержал div, например, чтобы сделать красивую рамку или что-то в этом роде, вы можете просто использовать вместо этого два div:

<div style="display: flex; justify-content: center;">
    <div style="display: inline-block;">
        <input type="button" value="Example Button" />
    </div>
</div>

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

Ответ 4

Текст справа из-за ширины: 1px. Установите большую ширину.

Ответ 5

Единственный способ сделать это, в отличие от JavaScript-решений, - дать ему ширину и установить ее левое и правое поля в auto:

<div style="margin-left:auto;margin-right:auto;width=80%">...</div>

Все другие решения испортит ваш внутренний текст.

Ответ 6

Попробуйте display: table;

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

Ответ 7

Flexbox должен сделать свое дело:

.container {
        display: flex;
}

.centeredDiv {
        display: inline-block;
        margin: 0 auto;
}