Left align css: CSS Layout — Horizontal & Vertical Align

Leave a Comment / Css / By /

html — CSS выравнивает DIV по центру, сохраняя текст внутри выравнивания по левому краю?

спросил

Изменено 2 года, 4 месяца назад

Просмотрено 220 раз

У меня есть следующий дистрибутив DIV:

 -------------------- ------------------- -
| большое изображение здесь | | большое изображение здесь |
-------------------- --------------------
      Текст один Текст два
      Здесь, здесь

Изображения находятся в DIV, а тексты — в DIV. Мне нужно, чтобы текстовые DIV были выровнены по центру DIV изображения, но содержимое текстовых DIV должно оставаться выровненным по левому краю.

PS: нельзя использовать DIV фиксированной ширины, потому что это веб-сайт с гибким содержимым (использует Bootstrap).

Есть идеи?

  • HTML
  • CSS
  • выравнивание

1

Css Grid очень гибкий, следующий код даст вам желаемый результат. Я не использую бутстрап и полагаюсь на сетку.

 .контейнер {
  отображение: сетка;
  столбцы сетки-шаблона: 1fr 1fr;
  строки шаблона сетки: 1fr 1fr;
}
.контейнер > * {
  выровнять себя: по центру;
  оправдать себя: центр;
}
.контейнер изображения {
  ширина: 100 пикселей;
  высота: 100 пикселей;
} 
 <дел>
    
    
    
Некоторый текст

    
Некоторый текст

Css flexbox grid with text-align: center

Justify-content: Свойство justify-content выравнивает содержимое гибкого контейнера по главной оси, которая по умолчанию (в случае Интернета) является горизонтальной осью .

Свойство text-align в CSS используется для выравнивания внутреннего содержимого блочного элемента.

 изображение {
    максимальная ширина: 100%;
}
.flex-контейнер {
    дисплей: гибкий;
    выравнивание текста: по центру;
}
.flex-контейнер > div {
    гибкий: 1;
}
.текстовое содержание {
    выравнивание текста: по левому краю;
    дисплей: встроенный блок;
} 
 <дел>
  <дел>
    

    
Текст один 

      Здесь
<дел>
Второй текст
Здесь

4

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

9Выравнивание 0000 — «По центру слева» выравнивается с CSS

Задать вопрос

спросил

6 лет, 11 месяцев назад

Изменено 6 лет, 10 месяцев назад

Просмотрено 6к раз

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

Как видите, когда размера синего прямоугольника недостаточно для размещения всех элементов в одном ряду, элемент 4º перемещается во второй ряд (как и ожидалось), но вместо выравнивания по центру он остается выровнены.

Мой код CSS 

 .outer-box
{
  фон: #00cc99;
  ширина: 100%;
  максимальная ширина: 800 пикселей;
  размер шрифта: 0;
  выравнивание текста: по центру;
  отступ: 10 пикселей;
}
.outer-box a
{
  отображение: встроенный блок;
  ширина: 120 пикселей;
  высота: 80 пикселей;
  отступ: 10 пикселей;
  фон: #ff5050;
  размер шрифта: 12px;
}
.outer-box a: hover
{
  фон: #9
 
;
}
.outer-box div
{
  фон: #99ccff;
  ширина: 100%;
  высота: 100%;
}

Мой HTML

Мой результат

Ожидаемый результат

Я безуспешно пытался играть с плавающими элементами div (один div внутри внешнего блока и элементы ссылки, использующие float left).

Есть ли способ сделать это без javascript?

Вот мой код в jsFiddle.

ПС. Английский не мой родной язык ‘-‘.

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

с гибким или встроенным блоком, вы можете использовать псевдоним высотой 1px и шириной 2 блоков + их поля.

Это будет похоже на пятую коробку, полностью заполняющую вторую строку и опускающуюся на третью строку:

 .outer-box {
  фон: #00cc99;
  ширина: 100%;
  максимальная ширина: 800 пикселей;
  дисплей: гибкий;
  flex-wrap: обернуть;
  выравнивание содержимого: по центру;
  маржа: авто;
  размер шрифта: 0;
  отступ: 10 пикселей;
}

.outer-box: после {
  содержание: '';
  максимальная высота: 1px;
  ширина: 320 пикселей
}

.outer-box {
  дисплей: блок;
  ширина: 120 пикселей;
  высота: 80 пикселей;
  отступ: 10 пикселей;
  фон: #ff5050;
  размер шрифта: 12px;
  поля: 5px 10px;
}

.outer-box a: hover {
  фон: #9
;
}

.outer-box div {
  фон: #99ccff;
  высота: 100%;
} 
  
 ИСПОЛЬЗОВАТЬ полностраничный режим, затем изменить размер оконного браузера 
 
<дел>
  
 
 
Я разместил здесь изображение и текст

  
Я разместил здесь изображение и текст

  
Я разместил здесь изображение и текст

  
Я разместил здесь изображение и текст

Версия с встроенными блоками для игры

Во-первых, мне нравится, как вы изложили свою проблему.