Как выровнять span по центру css

Как выровнить два блока span с плавающей шириной по центру блока div?

Прошу помочь в выравнивании двух блоков по центру другого блока. Особенность состоит в том, что: 1) первый блок имеет ширину 65px (корзина), 2) второй блок может быть от 30px до 100px. (стоимость товаров в корзине). Поскольку она может отображаться как: 0 руб, так и например 199 000 руб. И требуется, чтобы в обоих случаях корзина как с нулевой так и с любой суммой вставали строго по центру. Как это сделать через CSS .

Сейчас CSS-стили имеют такой вид:

.header_cart_js < width:100%; height:50%; position:relative; >.header_cart, .header_cart_content, .header_cart_content a < color:#000; width:170px; height:45px; >.cart < width:65px; height:45px; position:absolute; >.cart_price < color:green; margin-left:70px; min-width:30px; height:45px; position:absolute; >.header_cart_content svg

Выровнять по центру текст «span» внутри div

Теперь как выравнивать центр текста внутри div? (Предположим, что «левый» div после преобразования% получает ширину px 100px) Я попробовал стандартный способ использования margin:auto , но это не работает. Также я хочу избежать использования text-align:center . Есть ли другой способ этого?

testndtv 25 окт. 2011, в 11:10
Поделиться
Почему вы хотите избежать «text-align: center», если вы не возражаете, я спрашиваю?
Joey Ciechanowicz 25 окт. 2011, в 08:23

Если вы хотите выровнять текст span по центру, используйте span . Если это не дает желаемого результата, вам придется объяснить, почему мы можем вам помочь. (В противном случае мы просто должны угадать, каковы ваши реальные требования.)

Paul D. Waite 25 окт. 2011, в 08:49

Если это заголовок , используйте соответствующий тег (h1, h2, h31, h4, h5 или h6), не используйте несемантический .

Kyle 25 окт. 2011, в 08:58

В случае, если кто-то хочет использовать style = «vertical-align: middle;» . это работает, только если вы примените его к контейнеру DIV. Применение этого к промежутку ничего не делает . по крайней мере в IE10.

Выровнять текст по центру и левому краю

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

Отслеживать
задан 11 дек 2018 в 14:20
chocolate_moles chocolate_moles
13 6 6 бронзовых знаков
Решение на js jsfiddle.net/ba7zsr8h/1
13 дек 2018 в 11:28

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

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

.cnotainer < display: flex; align-items: center; justify-content: center; background-size: 10px; padding: 10px; border: 1px solid #000; border-radius: 10px; max-width: 500px; >.item < display: flex; align-items: center; justify-content: center; >.ico < color: red; font-weight: bold; margin-right: 10px; >.txt

   ico
 Lorem ipsum dolor sit amet Lorem ipsum dolor

Отслеживать
ответ дан 11 дек 2018 в 14:36
2,973 12 12 серебряных знаков 28 28 бронзовых знаков
Все конечно круто, но это должен быть один блок а не три разных
11 дек 2018 в 14:59
Так в вопросе и написано — «адаптивный блок»
11 дек 2018 в 15:03
А, дошло, в ответе и правда не очень адаптивный
11 дек 2018 в 15:04
а на рисунке его состояния с тремя разными ширинами
11 дек 2018 в 15:06

Читать:

Я забыл свою идентификатор как восстановить

@chocolate_moles это развернутый пример, что вам мешает заменить width на max-width. Исправил ответ, вот вам адаптивный блок

11 дек 2018 в 16:56

Вроде бы так — похоже

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

* < margin: 0; padding: 0; >html, body < padding: 30px; >.item < border: 1px solid #ccc; display: inline-block; padding: 6px 100px; border-radius: 4px; >span < display: inline-block; vertical-align: middle; >.a, .b < display: none; >.marker < padding: 4px; font-size: 40px; >@media(max-width:650px) < .item < padding: 6px 50px; >.a < display: block; >> @media(max-width:476px) < .item < padding: 6px 10px; >.a, .b < display: block; >>

  ★ Система 
дифференциальных 
уровнений

Отслеживать
ответ дан 12 дек 2018 в 1:16
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 61 61 бронзовый знак
С переносами работает, но нужно без переносов
13 дек 2018 в 11:26
@chocolate_moles тогда это не возможно
13 дек 2018 в 11:29

css
выравнивание

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как выровнять span?

— и я не понимаю, там же нет ни одной строчки, указывающей отступ слева. Почему span съезжает в правую сторону? Чёрная магия?

Вопрос задан более трёх лет назад
1460 просмотров

Комментировать

Решения вопроса 1

DivineDraft @DivineDraft

.footer span

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ответы на вопрос 3

WhatIsHTML

WhatIsHTML @WhatIsHTML

HTML программист

UPD2: Не о том подумал. https://jsfiddle.net/zq8465rb/10/
Я бы сделал выравнивание флексом. Задаем футеру свойство флекс и ровняем дочерний эелемент по центру. Если так уж хочется именно через позиционирование, то надо понимать, что position: absolute выбивает эелемент с нормального потока и text-align: center уже не действует на него. Ровнять элементы с position absolute очень просто

.footer < margin-top: 50px; width:100%; height: 150px; background-color: #1587a2; text-align: center; position:relative; >.footer span