Выравнивание этикеток в центре

Я хочу выровнять 4 текстовые метки в центре с краем 5 пикселей.Выравнивание этикеток в центре

Кодекс:

.header_section span { 
 
    width: 100%; 
 
} 
 
.header_section min { 
 
    padding-left: 30%; 
 
    padding-right: 5%; 
 
} 
 
.header_section consume { 
 
    padding-right: 5%; 
 
}

<div class="header_section"> 
 
    <span class="min">Min</span> 
 
    <span class="consume">Consumption</span> 
 
    <span class="avg">Average</span> 
 
    <span class="max">Max</span> \t \t 
 
</div>

мне нужно добавить идентификатор вместо класса делать?
Нужно ли использовать тег label вместо тега span?

источник

2016-06-03 Marta

Это может быть проще нарисовать картину того, что вы хотите достичь. – Paran0a

Класс используется для определения общего набора свойств css, который предназначен для использования многими элементами, поэтому в основном у вас есть 4 элемента, которые собираются использовать один и тот же набор свойств, вы создаете 1 класс, вы назначаете его им, и вы определяете его один раз. пожалуйста, вы могли бы опубликовать ожидаемое поведение, чтобы люди могли быть более точными в их помощи? – Gar

Вам нужно выровнять их по горизонтали или по вертикали? 'labels 'нужны только для элементов формы. Вам не нужно устанавливать атрибут 'id', если вам не нужно использовать его в качестве триггера для обработчиков событий javascript или что-то подобное - или просто требуется более высокая специфичность для объявления правил CSS вообще. – UncaughtTypeError

<style> 
.header_section{ 
text-align:center; 
} 
.header_section span { 
    width: 100%; 
    } 
.header_section min { 
padding-left: 30%; 
padding-right: 5%; 
} 
.header_section consume { 
padding-right: 5%; 
} 
</style>

источник

2016-06-03 08:04:30

Ниже стиль может это сделать. Он добавляет левый край 5px ко всем пролетам, кроме первого.

.header_section{ 
    text-align:center; 
} 
.header_section span + span { 
    margin-left:5px; 
}

Немного улучшенная версия находится здесь, в этом fiddle

источник

2016-06-03 08:28:09

мне нужно добавить идентификатор вместо класса делать?

Нет

мне нужно использовать маркирующие вместо диапазона тега не делать?

No. Этикетки предназначены для текстов, связанных с вводом в форме. Возможно, это список, в зависимости от семантического смысла.

.header_section{ 
 
    text-align:center; 
 
} 
 

 
.header_section li{ 
 
    display:inline-block; 
 
    margin-right:5px; 
 
}

<ul class="header_section"> 
 
    <li>Min</li> 
 
    <li>Consumption</li> 
 
    <li>Average</li> 
 
    <li>Max</li> \t \t 
 
</ul>

источник

2016-06-03 08:31:38 blonfu

Выравнивание этикеток в центре

ответ

Смежные вопросы