Css h1 - только ширину текста

Ответ 1

Вы можете использовать значение встроенного блока для отображения, однако в этом случае вы потеряете функцию блока h1, т.е. братья и сестры будут отображаться в строке с h1, если они являются встроенными элементами (в этом случае вы можете использовать строку- break
).

display:inline-block; 

Ответ 2

Вы можете использовать display:inline-block, чтобы заставить это поведение

Ответ 3

Используйте display: table!
Он не нарушает крах краха, как display: inline-block или float: left.

Ответ 4

Легкое исправление для этого состоит в том, чтобы поместить ваш элемент H1 влево:

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    float: left;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

Я собрал простой пример jsfiddle, который показывает эффект стиля "float: left" по ширине вашего элемента H1 для любого, кто ищет более общий ответ:

http://jsfiddle.net/zmEBt/1/

Ответ 5

Это потому, что ваш <h1> - это ширина центра. Укажите ширину в <h1> и используйте margin: 0 auto;, если хотите, чтобы она была центрирована.

Или, в качестве альтернативы, вы можете плавать <h1>, что сделает его ровным, чем текст.

Ответ 6

Как и другие предложения, вы можете использовать следующий код. Однако, если вы переходите в поле: 0 auto; маршрут я бы рекомендовал, чтобы маржа для верхней и нижней части H1 была установлена ​​на что-то отличное от 0. Итак, возможно, margin: 6px auto; или что-то в этом роде.

.centercol h1{
    display: inline-block;
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

Ответ 7

align-self-start, align-self-center... в flexbox

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    align-self: center;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

Ответ 8

Вы можете использовать <span> вместо <h1>.