Как горизонтально центрировать элемент span внутри тега h1?

Question

Как горизонтально центрировать элемент span внутри тега h1?

0

У меня сейчас эта разметка:

<h1 class="title" id="page-title">
    <span id="page-title-inner">Home</span>
</h1>

И этот CSS:

h1#page-title { 
    background: transparent url(../images/line.png) 0px 6px no-repeat;
    overflow: hidden;
}

#page-title-inner { 
    width: auto; 
    float: left; 
    background: #fff; 
    padding: 0 15px; 
    position: relative; 
    left: 45%; 
}

Этот CSS немного выполняет то, что я хочу, учитывая, что заголовок страницы короткий. Но если заголовок довольно длинный, он заполняет пространство от центра вправо.

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

Я попытался сделать что-то вроде:

#page-title-inner { 
    width: auto; 
    float: left; 
    background: #fff; 
    margin: 0 auto;
    display: block;
}

где значение margin 0 auto - это то, что центрирует диапазон, но мне интересно, почему он не работает.

Есть ли лучший способ и эффективнее достичь того, что я хочу сделать?

Atasha 23 сен. 2013, в 10:51

Источник

Теги:

html

css

2 ответа

1

Если вы не делаете что-то особенное с пролетом, вам это не нужно:

<h1 class="title" id="page-title">
    Home
</h1>
h1#page-title { 
    background: transparent url(../images/line.png) 0px 6px no-repeat;
    overflow: hidden;
    text-align: center;
}

если вам нужно что-то сделать с диапазоном:

#page-title-inner { 
    /*width: auto;  */
    /*float: left;  */
    background: #fff; 
    padding: 0 15px; 
    /*position: relative; */
  /*  left: 45%; */
}

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

Фактически вам не нужно указывать интервал ID, вы можете просто сделать это:

h1#page-title span{ /* ... */ }

Martijn 23 сен. 2013, в 06:33

0

Я решил обернуть текст внутри промежутка, чтобы я мог покрыть текст белым цветом с небольшим отступом слева и справа, потому что он будет выглядеть как текст с зачеркнутым определением, так как h1 получил вид строки фон.
Atasha 23 сен. 2013, в 08:03

Ещё вопросы

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

Ganesh Pandhere · Accepted Answer · 2013-09-23T05-35-00.000Z

remove float:left & left:45% свойства span, чтобы сделать его центром. Также установите text-align:center для вашего тега H1.

А ну понятно. Я также пытался сделать этот подход ранее, но он не центрируется из-за float: left. Спасибо за это.