Создание элемента h3 занимает пробел как текст внутри него

Question

Мое требование состоит в том, чтобы элемент h3 занимал только такое количество места, как текст в нем. Нельзя напрямую использовать span. Я пытался инкапсулировать h3 элемент с span, но это не сработало. Красный цвет должен иметь только ширину, как мир приветствия.

HTML код:

<div class="parent"> 
    <h3 class="center">hello world</h3> 
</div> 

код CSS:

.parent { 
    padding-left:5px; 
    overflow:auto; 
    background-color:blue; 
} 

.center { 
    text-align:center; 
    overflow:auto; 
    background-color:red; 
} 

JSFiddle

Answer 1

Попробуйте

.center { 
    display: inline-block; 
} 

http://jsfiddle.net/pn89b1c8/

text-align:center Добавление к .parent DIV будет центрировать h3 внутри .parent.

Answer 2

Вы можете использовать встроенный макет в h3.center элемента (например, inline-block). Если вы хотите центр h3 после этого, вы можете применить text-align: center к .parent

JSFiddle

Answer 3

вы можете использовать поверочный элемент вместо h3, но если вы хотите h3, просто добавьте эту строку, она будет хотя удалить центрирование

display:inline-block; 

и если вы хотите, чтобы центр его, а затем добавить

text-align:center 

т о родительском сНу CSS

Answer 4

Вы не можете использовать пролет? Что делать, если я использую не диапазон?

.parent { 
 
    padding-left:5px; 
 
    overflow:auto; 
 
    background-color:blue; 
 
} 
 

 
.center { 
 
    text-align:center; 
 
    overflow:auto; 
 
    
 
} 
 
notaspan{ 
 
    background-color:red; 
 
}

<div class="parent"> 
 
    <h3 class="center"><notaspan>hello world</notaspan></h3> 
 
</div>

Answer 5

.center {  
     text-align:center; 
     overflow:auto; 
     background-color:red; 
     position:absolute; 
     left:50%; 
     top:50%; 
     transform:translate(-50%,-50%); 
} 

При этом, вам не нужно, чтобы изменить HTML или параметры отображения. Если установка абсолютного значения на h3 вызывает проблемы, вы можете установить значение .parent в relative. Вы даже можете удалить text-align:center;, я верю.

Answer 6

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

.parent { 
 
    background-color:blue; 
 
} 
 
.center { 
 
    background-color:aqua; 
 
    display:table; /*shrink to fit width*/ 
 
    margin:auto; /*center it*/ 
 
}

<div class="parent"> 
 
    <h3 class="center">hello world</h3> 
 
</div>