CSS, центрированный div, сжимается, чтобы соответствовать?

Я не знаю, решения здесь кажутся частично правильными, но тогда на самом деле не работают. Основываясь на ответе Джоша Стодолы, вот кросс-браузерное решение, протестированное в Firefox, Safari, Chrome и IE 7, 8 & 9

CSS:

body {
    text-align: center;
}

#centered-div {
    text-align: left;
    background: #eee;

    display: inline-block;

    /* IE7 bs - enables inline-block for div-elements*/
    *display: inline;
    zoom: 1;
}

разметка:

<div id="centered-div">
    Cum sociis natoque penatibus et magnis dis<br />
    parturient montes, nascetur ridiculus mus.
</div>

чтобы добавить поддержку IE6 (вздох), добавьте _height: [yourvalue] в div. Да, с подчеркиванием.

проверьте это сами на JSFiddle:http://jsfiddle.net/atp4B/2/

реквизит для Джоша Стодолы, хотя он был не совсем прав. Необходимое свойство:

display: inline-block;

, который решил мою проблему. Ура!

<style type="text/css">
    /* online this CSS property is needed */
    p.block {
        text-align: center;
    }
    /* this is optional */
    p.block cite {
        border: solid 1px Red;
        padding: 5px;
    }    
</style>

<p>Some text above</p>
<p class="block"><cite>some text</cite></p>
<p>Some text below</p>

подсказка: не используйте DIVs для текстовых блоков (для SEO и лучших семантических целей)

вот пример, который я сделал именно то, что вы ищете:
(jsFiddled здесь:http://jsfiddle.net/yohphomu/)

предупреждение:

я фанатик CSS!!!

Если я правильно понимаю ваш вопрос, нет необходимости устанавливать высоту или ширину, потому что их настройка по умолчанию-auto (это, как говорится, вы можете использовать auto), но единственная проблема заключается в том, что если вы хотите изменить фон или поместить его в рамку сделать это более чем нужное поле. Почему это так и как это исправить, читайте далее.

или просто скопируйте и изучите пример.

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

Итак, теперь, когда мы понимаем, что происходит, как мы это исправим? Ну, нам нужна одна часть, чтобы центрировать ее, а другая-чтобы раскрасить. В моем примере я использовал div в центре и продолжительность цвета. Мне нужен был div? Я уверен, что нет. Я мог бы достиг того же самого, используя p в центр (или я мог бы избавиться от p и просто использовать div). Причина, по которой я это сделал, состояла в том, чтобы держать его организованным.

На самом деле просто потому, что я не понимал, пока не подумал об этом, но не хотел его исправлять.

надеюсь, что это ответ на ваш вопрос. Вам потребовалось 4 года для ответа, но мне, 30 минут, чтобы понять это (и я изучал CSS в течение нескольких дней).

в Пример:

<div class='container'>
    <div class="text">
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    <div class="holder">
        <p><span>text here</span></p>
    </div>
    <div>
        text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
    </div>
    </div>

тогда css будет выглядеть так:

.container {
width: 500px;
height: 500px;
}
.text {
    font-size: 20px;
}
.holder {
text-align: center;


}
span {
background-color: blue;
    border: 1px solid black;
}

обратите внимание: я поставил контейнер с заданной шириной и высотой, потому что я работаю над проектом, в то же время и имитировать полный экран с текстом.

Также обратите внимание, что я сделал это так, что текст имеет отдельный цвет фона с бордюром. Я сделал это, чтобы показать, что его измерения независимы и масштабируются при необходимости.

добро пожаловать, и я думаю, что люди не понял вашего вопроса. Надеюсь, что да.

рекомендую flexbox! Смотрите, что можно на этом сайте, решается с помощью flexbox.

это довольно новый, но работает во всех основных современных браузерах (IE10 использует -ms- префикс, IE11+, Firefox 31+, Chrome 31+, Safari 7+, ...)- смотрите этот график.

в основном, вертикальное и горизонтальное центрирование, в комплекте с динамической калибровкой, может быть выполнено в 4-х заявлениях:

parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

убедится этот родитель на самом деле 100% высота. Возможно, Вам потребуется установить body и html до 100% высоты тоже.

моя реализация этого можно увидеть на моем личном сайте,http://pgmann.cf.

что-то вроде этого?

<html>
<head>
</head>
<body style="text-align: center;">

   <div style="width: 500px; margin: 0 auto;">

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

       <div>hello</div>

       <p>text text text text text text text text text text text text text text text text text text text text text text</p>

   </div>


</body>

<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>

<p class="one">some text</p>

HTML

<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>

CSS

.outerdiv{
text-align: center;
}
.innerdiv{
display: inline-block;
}