Подтвердить что ты не робот

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

Вот что я хочу:

text text text text text text text text text text text
text text text text text text text text text text text
                   +-----------+
                   | some 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 был минимальной шириной, необходимой для содержания ее текста без упаковки. Если текст слишком длинный, чтобы соответствовать без обертывания, тогда это нормально, если он обертывается.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Элементы DIV по умолчанию являются блочными, что означает, что они автоматически получают 100% ширину. Чтобы изменить это, используйте этот CSS...

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


<div class="centerBox">
  Some text
</div>

EDIT: обновлен, чтобы использовать класс CSS, а не встроенный атрибут, и изменить "блок" на "встроенный блок"

Ответ 2

<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>

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

Ответ 3

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

display: inline-block;

Что решило мою проблему. Ура!

Ответ 4

Я не знаю, решения здесь кажутся частично правильными, но потом на самом деле не работают. На основании ответа Джоша Стодолы, здесь кросс-браузерное решение, протестированное в 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/

Ответ 5

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

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

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

Если я правильно понимаю ваш вопрос, нет необходимости устанавливать высоту или ширину, потому что их значение по умолчанию - авто (это означает, что вы можете использовать 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;
}

Примечание. Я установил контейнер с установленной шириной и высотой, потому что я работал над проектом одновременно и смоделировал полный экран с текстом.

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

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

Ответ 6

Я рекомендую 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.

Ответ 7

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

<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>

Ответ 8

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

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

Ответ 9

HTML

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

CSS

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