Центрировать авто-ширину div?

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

width: 700px;
margin-left: auto;
margin-right: auto;

проблема в том, что вы хотите, чтобы div был фиксированной шириной. Я хочу, чтобы div настроить его размер на основе текста в div и по-прежнему центрировать. Я пробовал:

width: auto;
margin-left: auto;
margin-right: auto;

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

Кто-нибудь знает, что делать здесь?

Ответы

Ответ 1

для родительского блока или тела - text-align:center; для centerd block- display:inline-block;

.center{display:inline-block;background:red}
body{text-align:center}

<div class="center">
    <p contenteditable="true">write text</p>
</div>

DEMO http://jsfiddle.net/RXP4F/

Редактируемый контент MDN

Ответ 2

Вы пробовали предложенный здесь подход? http://www.tightcss.com/centering/center_variable_width.htm

в принципе. поместите свой контент внутри плавающего div поместите этот плавающий div в другой плавающий div

положить левый: 50%, положение относительно внешнего div положить левый: -50%, положение относительно внутреннего div

наконец, вложите все в один div с переполнением: hidden

.outermost-div{
    background-color: blue;
    overflow:hidden;    
}

.inner-div{
   float:left;
   left:50%;
   background-color: yellow;
   position: relative;
}

.centerthisdiv {
   position:relative;
   left: -50%;
   background-color: green;
   float:right;
   width:auto;
}

вот моя демонстрация jsfiddle: http://jsfiddle.net/wbhyX/1/

Ответ 3

Попробуйте эту структуру.

<div class="container">
    <div class="center_div">

    </div>
</div>



.container{
    float: left;
    left: 50%;
    position: relative;
}
.center_div{
   position: relative;
   left: -50%;
   float: left;
}

Ответ 4

Использовать маржу: 0px auto; and display: table; Пример: https://jsfiddle.net/da8p4zdr/

Ответ 5

Возможно, вы захотите попробовать CSS display:table-cell или display:table

Ответ 6

Вы можете использовать display: flex и margin: 0 auto; для выравнивания по центру внутреннего div с автоматической шириной и указанной высотой.

.outer {
    width: 500px;
}

.inner {
    width: auto;
    height: 250px;
    display: flex;
    margin: 0 auto;
}

Ответ 7

Редакция:

используйте table, это может быть проще в стиле. Затем добавьте div в tr

Ответ 8

.outer-container { позиция: относительная; слева: 50%; плыть налево; ясно: оба; margin: 10px 0; text-align: left; }

.inner-container { фон: красный; позиция: относительная; слева: -50%; text-align: left; }

Ответ 9

Центрирование элемента по горизонтали может немного странно, так как функциональность не очень интуитивная. Действительно, вам нужно играть в игры с text-align:center; и margin:auto,, и вам нужно будет знать, когда использовать.

Например, если я хочу сосредоточить содержимое элемента (raw-text), включая кнопки и входы, я могу использовать text-align:center.

.text-center {
  text-align:center;
}

<div class="text-center" style="border:1px dashed blue;padding:6px;" >
  My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>