Содержимое блока css по центру: html — Сделать блок div по центру родительского блока, а содержимое блока div выровнять по правому краю

Leave a Comment / Css / By /

html — Сделать блок div по центру родительского блока, а содержимое блока div выровнять по правому краю

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

Вопрос задан

Изменён 6 лет 7 месяцев назад

Просмотрен 4k раз

Необходимо расположить блок div горизонтально по центру родительского блока, а содержимое блока div должно горизонтально располагаться по правому краю блока.

.parent {
  margin-top: 50px;
  border: 1px solid black;
  padding: 20px;
}
.child {
  margin: 0 auto;
  border: 1px solid green;
  padding: 10px;
}
.text-right {
  text-align: right;
}
<div>                 
    <div>
      <div>
        text 1
      </div>
      <div>                                
        text 2
      </div>
    </div>
</div>

Text 1 и Text 2 должны быть посредине и на разных строках. Не могу понять что добавить надо.

  • html
  • css

2

Центрирование текста в блоке фиксированной ширины

.parent {
  margin-top: 50px;
  border: 1px solid black;
  padding: 20px;
  text-align: right;
}
.child {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
  text-align: center;
  width: 300px;
}
<div>                 
    <div>
      <div>
        text 1
      </div>
      <div>                                
        text 2
      </div>
    </div>
</div>

Центрирование текста с помощью padding

.parent {
  margin-top: 50px;
  border: 1px solid black;
  padding: 20px;
  text-align: right;
}
.child {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
  text-align: center;
}
<div>                 
    <div>
      <div>
        Lorem ipsum dolor
      </div>
      <div>                                
        Sit amet
      </div>
    </div>
</div>

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

Центрирование блока фиксированной ширины внутри родителя

. parent {
  margin-top: 50px;
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
  text-align: right;
  width: 300px;
}
<div>                 
    <div>
      <div>
        text 1
      </div>
      <div>                                
        text 2
      </div>
    </div>
</div>

Центрирование блока динамической ширины внутри родителя

.parent {
  margin-top: 50px;
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
  text-align: right;
}
<div>                 
    <div>
      <div>
        Lorem ipsum dolor
      </div>
      <div>                                
        Sit amet
      </div>
    </div>
</div>

1

Возможно так:

. parent {
  margin-top: 50px;
  border: 1px solid black;
  padding: 20px;
  text-align: right;
}
.child {
  margin: 0 auto;
  border: 1px solid green;
  padding: 10px;
  display: inline-block;
}
.text-right {
}
<div>                 
    <div>
      <div>
        text 1
      </div>
      <div>                                
        text 2
      </div>
    </div>
</div>

2

Как поместить контент блока по центру в CSS Grid?

Программирование на Python для начинающих

Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Делай то, что в жизни тебе даётся легко, и делай это изо всех сил.

Неизвестный

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

В такой ситуации на помощь приходит CSS Flexbox, которая позволяют разместить содержимое по центру родительского блока, сам блок не затрагивая.

Далее пример кода:


<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>
CSS код:
article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;

}

Пример

  • Создано 07. 07.2020 12:30:26
  • Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov. ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

html — центрировать блок контента, если вы не знаете его ширину заранее

спросил

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

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

После множества попыток и поиска я так и не нашел удовлетворительного способа сделать это с помощью CSS2.

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

 таблица {
  поле: 0 авто;
} 
 <таблица>
  
    тест
тест

Я хочу знать, как это сделать без фиксированной ширины, а также быть блоком.

  • HTML
  • CSS

1

@Jason, да,

работает. Хорошие времена. Но я предложу следующее:

 body {
  выравнивание текста: по центру;
}

.my-centered-content {
  поле: 0 авто; /* Центрирование */
  дисплей: встроенный;
} 
 <дел>
  
тест

  
тест

РЕДАКТИРОВАТЬ @Santi, блочный элемент заполнит родительский контейнер по ширине, поэтому фактически он будет равен width:100% и текст будет располагаться слева, оставляя вас с бесполезной разметкой и нецентрированным элементом. Возможно, вы захотите попробовать display: inline-block; . Firefox может жаловаться, но это правильно. Кроме того, попробуйте добавить границу : сплошной красный 1 пиксель; в CSS DIV .my-centered-content , чтобы увидеть, что происходит, когда вы пробуете эти вещи.

1

Это будет самый нелепый ответ, но он работает:

Используйте устаревший тег

.

😛

Я же говорил, что это будет глупо. Но, как я уже сказал, это работает!

*вздрагивает*

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

вместо. Единственное отличие состоит в том, что текст в
также располагается по центру. Если вы тоже этого хотите, просто добавьте text-align: center; правило.

Следует также помнить, что

по умолчанию заполняет все доступное горизонтальное пространство. Поместите границу на него, если вы не уверены, где он начинается и заканчивается.

Следующее работает достаточно хорошо. обратите внимание на позицию и использование auto 

 

            <дел>

ПРИМЕЧАНИЕ: не уверен, что это работает в IE.

В FF3 вы можете:

 
test
test

Это имеет то преимущество, что используется любой элемент, который имеет наиболее семантический смысл (замените div на что-то лучшее, если это уместно), но недостаток в том, что он не работает в IE (grr…)

В остальном, не устанавливая ширину, лучше всего использовать javascript для точного позиционирования левого края. Я не уверен, что вы бы назвали это «причудливым трюком».

Конечно, это действительно зависит от того, что вы хотите сделать. Учитывая ваш простой тестовый пример, div с text-align: center будет иметь точно такой же эффект.

 #обертка {
  ширина: 100%;
  граница: 1px сплошная #333;
}
#содержание {
  ширина: 200 пикселей;
  фон: #0f0;
} 
 

  
 Содержимое здесь

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

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

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

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

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

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

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

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

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

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

Как центрировать несколько элементов Div с помощью CSS

В какой-то момент у вас может возникнуть ситуация, когда вы захотите центрировать несколько элементов (возможно,

элементов или других блочных элементов) на одной строке в области фиксированной ширины. Центрировать один элемент в фиксированной области легко. Просто добавьте margin: auto и фиксированную ширину к элементу, который вы хотите центрировать, и поля заставят элемент центрироваться.

Существует ряд старых методов центрирования нескольких элементов div, но теперь это намного проще сделать с помощью современных методов CSS. Я расскажу о более старых методах в последующих разделах, но самый простой способ сделать это показан первым.

Центрирование нескольких элементов Div с помощью Flexbox

Теперь Flexbox является одним из стандартов для работы с методами компоновки. Самый простой способ центрировать несколько div — поместить их во flex-контейнер, а затем использовать несколько функций flexbox. Предположим, у нас есть следующий HTML:

 

  <дел>1
  <дел>2
  <дел>3
  <дел>4
  <дел>5

Следующий CSS центрирует элементы внутри контейнера:

 .контейнер {
  дисплей: гибкий;
  выравнивание содержимого: по центру;
}

Это центрирует элементы с оставшимся пространством, делегированным слева и справа. Если вы хотите, чтобы расстояние между элементами было одинаковым, вы можете сделать следующее:

 .container {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
}

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

 .container {
  дисплей: гибкий;
  выравнивание содержимого: пространство вокруг;
}

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

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

См. Pen
Выравнивание элементов вдоль главной оси: justify-content от Louis Lazaris (@impressivewebs)
на CodePen.

  • Посмотреть демонстрацию

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

Старый способ выравнивания по центру нескольких элементов Div

Обычно в такой ситуации вы просто перемещаете поля, а затем добавляете левое и правое поля, чтобы распределить их соответствующим образом. Но это может стать немного запутанным, потому что IE6 не любит поля для плавающих элементов, и вам всегда нужно иметь другой идентификатор или класс для элементов, для которых вы не хотите полей (например, для последнего и/или первого).

Вы можете обойти проблему IE6, добавив display: inline в объявление только для IE6, но ваш код все равно будет несколько запутанным из-за дополнительного кода, чтобы заставить первый и/или последний элемент работать. Кроме того, последний ящик мог попасть на следующую строку в IE.

Есть еще одно решение, которое может работать лучше в определенных обстоятельствах.

Используйте

встроенный блок и управляйте пробелами

Чтобы добиться того же эффекта, что и при добавлении плавающих элементов и полей, вы можете просто «преобразовать» свои блочные элементы во встроенные блоки, а затем манипулировать пробелами между ними. Вот как может выглядеть CSS:

 #родитель {
  ширина: 615 пикселей;
  граница: сплошная 1px #aaa;
  выравнивание текста: по центру;
  размер шрифта: 20px;
  межбуквенный интервал: 35px;
  пробел: nowrap;
  высота строки: 12px;
  переполнение: скрыто;
}
.ребенок {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: сплошная 1px #ccc;
  отображение: встроенный блок;
  вертикальное выравнивание: посередине;
}

В моем примере выше я предполагаю, что есть четыре дочерних блока, каждый с классом дочерний и каждый 100 пикселей на 100 пикселей. Блоки, естественно, являются элементами блочного уровня, но CSS изменяет их на 9.0013 inline-block , что позволяет им естественным образом сочетаться с текстом и пробелами. Конечно, поскольку у нас нет текста в родительском контейнере, управление текстом и пустым пространством не будет проблемой.

Родительский элемент (с идентификатором parent в этом примере) имеет четыре набора ключевых свойств текста, а дочерние элементы имеют два:

  • text-align делает все встроенные дочерние элементы центрированными
  • letter-spacing управляет размером каждого пробела между блоками
  • white-space: nowrap удерживает последний элемент от возможного перехода на следующую строку
  • переполнение: скрытый предотвращает растяжение поля в IE6
  • vertical-align: middle (на дочерних элементах) удерживает блоки в одной вертикальной плоскости друг с другом при добавлении содержимого
  • дисплей: встроенный блок (очевидно)

Internet Explorer поднимает свою уродливую голову

Каким было бы решение CSS без проблем с Internet Explorer? Хотя этот метод работает одинаково во всех браузерах (включая IE8), IE6 и IE7 не взаимодействуют, потому что они не полностью поддерживают 9. 0013 встроенный блок . Чтобы эти браузеры отображали практически одинаковый результат, вам нужно добавить следующий CSS:

 .child {
  * дисплей: встроенный;
  * поле: 0 20 пикселей 0 20 пикселей;
}

Приведенный выше CSS должен применяться только к IE6 и IE7 и должен располагаться после других CSS. В моем коде (и в приведенном выше примере кода) я добился этого с помощью хака со звездочкой. Звездочка (или звездочка) в начале каждой строки скрывает обе строки от всех браузеров, кроме IE6 и IE7. Добавленные здесь поля помогают нам получить тот же визуальный результат, а новые 9Свойство 0013 display использует ошибку в этих браузерах, из-за которой блочный элемент работает как встроенный, когда вы объявляете display: inline-block , за которым следует display: inline .

Недостатки / Заключительные мысли

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *