Div внутри div по центру: html — Центрирование div по центру родительского div

Разное
18 Май, 2023
0

html — Центрирование div по центру родительского div

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

Вопрос задан 6 лет 7 месяцев назад

Изменён 2 года 9 месяцев назад

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

Вопрос избитый, но справиться не могу. Есть внешний div c внутренним дивом и картинкой во всю ширину

Не могу отцентрировать текст поверх картинки

<div>
  <div>Text</div>
  <img src="https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg">    
</div>

css

.one {
  background-color: #ccc;
}
.two {
  width: 40%;
  height: 40%;
  margin: 0px auto;
  text-align: center;
}
.full {
  width:100%;
  height: auto;
}

html
css
div

Применяем абсолютное позиционирование+margin:auto;

* {
  margin: 0;
  padding: 0;
}
. one {
  background-color: #ccc;
  position: relative;
}
.two {
  width: 40%;
  height: 40%;
  margin: 0px auto;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #ccc;
}
.full {
  width: 100%;
  height: auto;
}

<div>
  <div>Text</div>
  <img src="https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg">
</div>

Можно через свойство flex,

* {
  margin: 0;
  padding: 0;
}
.one {
  display: flex; 
  height: 300px;
  background:url(https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg) no-repeat center;
  background-size: contain;
}
.two {
  margin: auto;
  background: red; 
  padding: 20px;
}

<div>
  <div>Text</div>
</div>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как выровнять контент div по нижней границе

CSS позволяет выровнять контент <div> по нижней границе с помощью специальных методов. Можно также выровнять контент по верхней границе <div>, по левой или правой стороне нижней границы. Рассмотрим все возможные варианты. Следуйте приведенным ниже шагам.

Рассмотрим пример и попробуем вместе разобраться с каждой частью кода.

Создайте <div> с классом “main”. Он включает три других div.

Разместите тег <h3> в первом div, который имеет название класса “column1”, напишите в нем контент.
Второй <div> имеет класс с названием “column2”.
Третий <div> имеет id с названием “bottom”.

<body>
  <div>
    <div class=“column1”>
      <h3>W3docs</h3>
    </div>
    <div class=“column2”>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
    </div>
    <div>Нижний контент Div</div>
  </div>
</body>

Используйте свойства border, float, height, width, position для добавления стиля к классу «main». Свойство float указывает, с какой стороны контейнера должны находиться элементы. Свойство position указывает положение элемента в документе.
Установите color для текста первого <div>. В этом примере мы использовали значение hex для color.
Используйте свойство text-align для выравнивания внутреннего контента блочного элемента.
Используйте свойства bottom и left. Свойство bottom указывает для элемента нижнее позиционирование вместе со свойством position. Свойство left указывает левое позиционирование элемента вместе со свойством position.

Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute).

.main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      left:0;                          
      }

Давайте соединим части кода и посмотрим, как он работает!

Результат нашего кода

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .  main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      left:0;                          
      } 
    </style>
  </head>
  <body>
    <div>
      <div>
        <h3>W3docs</h3>
      </div>
      <div>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div>Нижний контент Div</div>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где контент div выравнивается по правой стороне нижней границы.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      . main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position:relative; 
      } 
      .column1 { 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2 { 
      text-align:center; 
      } 
      #bottom { 
      position:absolute;                  
      bottom:0;                          
      right:0;                          
      } 
    </style>
  </head>
  <body>
    <div>
      <div>
        <h3>W3docs</h3>
      </div>
      <div>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div>Нижний контент Div</div>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где контент div выравнивается по центру нижней границы.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .  main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      width:100%;
      text-align:center;
      color:#ffffff;
      background-color: blue;   
      padding:15px 0;                 
      } 
    </style>
  </head>
  <body>
    <div>
      <div>
        <h3>W3docs</h3>
      </div>
      <div>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div>Нижний контент Div</div>
    </div>
  </body>
</html>

Попробуйте сами!

В этом примере мы задали 100% для width нижнего div.

Рассмотрим пример, где контент div выравнивается по центру с помощью flexbox. Flexbox — это одномерный макет, т.е. элементы расположены в виде строк или столбцов. В следующем примере мы использовали свойство flex-direction со значением «column». Свойство flex-direction указывает главную ось flex-контейнера и определяет порядок отображения флекс-элементов. Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Значение «space-between» используется со свойством justify-content, когда доступно пространство между строками элементов.

Свойство justify-content должно быть использовано вместе со свойством display, которое имеет значение «flex». Для выравнивания элементов по вертикали используйте свойство align-items.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      main {
      border: 1px solid blue;
      height: 150px;
      display: flex;                   /* defines flexbox */
      flex-direction: column;          /* top to bottom */
      justify-content: space-between;  /* first item at start, last at end */
      }
      h3 {
      margin: 0;
      }
    </style>
  </head>
  <body>
    <main>
      <h3>Header title</h3>
     Текст, выровненный по нижней границе
    </main>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где использовано CSS свойство align-items. Оно указывает выравнивание по умолчанию для флекс-элементов. Это похоже на свойство justify-content, но является его вертикальной версией.

Обратите внимание, что некоторые браузеры не поддерживают display:flex. Используйте приведенные ниже префиксы.

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

Заметьте, что для поддержки всеми браузерами мы используем расширения -Webkit- и -Moz- вместе со свойством align-items.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      main {
      border: 1px solid green;
      background-color:green;
      color:#ffffff;
      padding:20px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 150px;
      flex-direction:column;
      }
      h3 {
      margin: 0;
      }
      p{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 150px;
      -webkit-box-align: end;
      -webkit-align-items: flex-end;
      -ms-flex-align: end;
      align-items: flex-end;
      margin:0;
      }
    </style>
  </head>
  <body>
    <main>
      <h3>Header title</h3>
      <p>Текст, выровненный по нижней границе</p>
    </main>
  </body>
</html>

Попробуйте сами!

Давайте рассмотрим другой пример, где использовано свойство position. В нашем первом примере мы также использовали свойство position со значением «relative» для HTML-тега <main>, а значение «absolute» было использовано для нижнего div.

В этом примере мы используем свойство span>position со значением «fixed» для <div>. Свойство z-index указывает порядок элементов и потомков, или флекс-элементов по оси z.

Свойство z-index имеет эффект только на позиционированных элементах.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      * {
      margin: 0;
      padding: 0;
      }
      main{
      position:relative;
      }
      div{
      background-color: yellow;
      height: 200px;
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 1;
      border-top: 2px solid gold;
      }
    </style>
  </head>
  <body>
    <main>
      <h3>This is the header
      </h3>
      <div>Текст, выровненный по нижней границе</div>
    </main>
  </body>
</html>

Попробуйте сами!

html — Как я могу центрировать div внутри другого div?

спросил 10 лет, 1 месяц назад

Изменено 1 год, 5 месяцев назад

Просмотрено 586 тысяч раз

Я полагаю, что #container будет находиться в центре #main_content . Однако это не так. Почему это не работает и как это исправить?

 #main_content {
  верх: 160 пикселей;
  слева: 160 пикселей;
  ширина: 800 пикселей;
  минимальная высота: 500 пикселей;
  высота: авто;
  цвет фона: #2185C5;
  положение: родственник;
}
#контейнер {
  ширина: авто;
  высота: авто;
  поле: 0 авто;
  отступ: 10 пикселей;
  положение: родственник;
}

 <дел>
  <дел>

HTML
CSS

Вам необходимо установить ширину контейнера ( авто не работает):

 #контейнер {
    ширина: 640 пикселей; /* Также может быть в процентах. */
    высота: авто;
    поле: 0 авто;
    отступ: 10 пикселей;
    положение: родственник;
}

Справочник по CSS от MDN объясняет все это.

Проверьте эти ссылки:

auto — Справочник по CSS | МДН
margin — справочник по CSS | МДН
Что означает значение auto в свойстве CSS –

В действии на jsFiddle.

Технически, ваш внутренний DIV ( #container ) расположен по центру по горизонтали. Причина, по которой вы не можете сказать, заключается в том, что с помощью свойства CSS width: auto внутренний DIV расширяется до той же ширины, что и его родитель.

См. эту скрипту: http://jsfiddle.net/UZ4AE/

 #container {
    ширина: 50 пикселей;
    высота: авто;
    поле: 0 авто;
    отступ: 10 пикселей;
    положение: родственник;
    цвет фона: красный;
}

В этом примере я просто установил ширину #container на 50px и установил фон на красный , чтобы вы могли видеть, что он центрирован.

Я думаю, что реальный вопрос заключается в том, «Как центрировать элементы по горизонтали с помощью CSS?» и ответ (барабанная дробь, пожалуйста): это зависит!

Я не буду полностью перефразировать бесчисленное множество способов центрирования с помощью CSS, когда W3Schools делает это так хорошо здесь: http://www. w3schools.com/css/css_align.asp, но основная идея заключается в том, что для элементы уровня блока, вы просто указываете желаемую ширину и устанавливаете левое и правое поля на авто .

 .центр {
    поле слева: авто;
    поле справа: авто;
    ширина: 50 пикселей;
}

Обратите внимание: Этот ответ относится только к элементам уровня блока ! Чтобы расположить встроенный элемент , вам нужно будет использовать свойство text-align: center в первом родительском блоке .

Еще один интересный способ: fiddle

CSS

 .container {
   фон: желтый;
   ширина: 100%;
   дисплей: гибкий;
   flex-направление: строка;
   flex-wrap: обернуть;
   выравнивание содержимого: по центру;
   выравнивание элементов: по центру;
}
.centered-div {
   ширина: 80%;
   рост: 190 пикселей;
   поле: 10 пикселей;
   отступ: 5px;
   фон: синий;
   белый цвет;
}

HTML

 
        <дел>
            Наслаждайтесь

Вы можете центрировать плавающий div с помощью этого небольшого кода:
#div { ширина: 200 пикселей; высота: 200 пикселей; положение: абсолютное; слева: 50%; верх: 50%; верхнее поле: -100px; поле слева: -100px; }
2
Теперь просто определите ваш
#main_content text-align:center и определите ваш #container display:inline-block;
вот так:
#main_content { выравнивание текста: по центру; } #контейнер{ отображение: встроенный блок; вертикальное выравнивание: сверху; }
1
Попробуйте добавить
text-align: center;
в объявление CSS вашего родительского контейнера. И следующее для дочернего контейнера:
отображение: встроенный блок;
Это должно сработать.
0
Использовать поле :0 авто; в дочерний div. Затем вы можете центрировать дочерний div внутри родительского div.
Это сработает, задав #container div width:80% (любая ширина меньше основного содержимого и указанная в %, чтобы она хорошо управлялась как слева, так и справа) и задав margin:0px auto; или поле:0 авто; (оба работают нормально).
Для начала я бы попробовал задать более конкретную ширину. Трудно центрировать то, что уже занимает всю ширину:
#container { ширина: 400 пикселей; }
В нескольких проектах я использовал следующий метод:
https://jsfiddle.net/u3Ln0hm4/
.cellcenterparent{ ширина: 100%; высота: 100%; дисплей: таблица; } .cellcentercontent{ отображение: таблица-ячейка; вертикальное выравнивание: посередине; выравнивание текста: по центру; }
Возможно, вы хотите так:
HTML

текст, выровненный по вертикали
еще немного текста здесь

CSS
#main_content { ширина: 500 пикселей; высота: 500 пикселей; фон: #2185C5; отображение: таблица-ячейка; выравнивание текста: по центру; вертикальное выравнивание: посередине; } #контейнер{ ширина: авто; высота: авто; фон: белый; отображение: встроенный блок; отступ: 10 пикселей; }
Как?
В ячейке таблицы выравнивание по вертикали по середине будет установлено на выравнивание по вертикали по центру элемента, а text-align: center; работает как горизонтальное выравнивание элемента.
Замечено, почему #container находится в встроенном блоке, потому что это условие строки.
Вот новый способ легко отцентрировать ваш div с помощью дисплея Flexbox.
См. эту рабочую скрипту: https://jsfiddle.net/5u0y5qL2/
Вот CSS:
.layout-row { box-sizing: граница-коробка; дисплей: -webkit-box; отображение: -webkit-flex; дисплей: гибкий; -webkit-box-direction: нормальный; -webkit-box-orient: горизонтальный; -webkit-flex-направление: строка; flex-направление: строка; } .layout-align-center-center { -webkit-box-align: по центру; -webkit-align-items: по центру; -ms-grid-row-align: по центру; выравнивание элементов: по центру; -webkit-align-content: по центру; выровнять содержимое: по центру; -webkit-box-pack: по центру; -webkit-justify-content: по центру; выравнивание содержимого: по центру; }
Попробуйте получить position:relative; в вашем #контейнере . Добавьте точную ширину в #container :
#main_content { верх: 160 пикселей; слева: 160 пикселей; ширина: 800 пикселей; минимальная высота: 500 пикселей; высота: авто; цвет фона: #2185C5; положение: родственник; } #контейнер { ширина: 600 пикселей; высота: авто; маржа: авто; отступ: 10 пикселей; }
Рабочая демонстрация
Вот решение:
#main_content { цвет фона: #2185C5; высота: авто; поле: 0 авто; минимальная высота: 500 пикселей; положение: родственник; ширина: 800 пикселей; }
#main_content { ширина: 400 пикселей; поле: 0 авто; минимальная высота: 300 пикселей; высота: авто; цвет фона: #2185C5; положение: родственник; } #контейнер { ширина: 50%; высота: авто; поле: 0 авто; цвет фона: #CCC; отступ: 10 пикселей; положение: родственник; }
Попробуйте это. Проверил нормально. На jsfiddle есть живая проверка.
Все это говорили, но, думаю, не помешает повторить еще раз.
Вам нужно установить ширину на какое-то значение. Вот что проще понять.
http://jsfiddle.net/XUxEC/
Сделать div в центре. Нет необходимости назначать ширину div.
Рабочая демонстрация находится здесь:
http://jsfiddle.net/6yukdmwq/
.container { ширина: 100%; высота: 500 пикселей; дисплей: таблица; граница: 1px сплошной красный; выравнивание текста: по центру;} .центр { отображение: таблица-ячейка; вертикальное выравнивание: посередине; } .содержание { отображение: встроенный блок; выравнивание текста: по центру; граница: 1px сплошной зеленый; }
<раздел> <дел> <дел>
Здравствуйте! Текст в центре

Div внутри div по центру: html — Центрирование div по центру родительского div

html — Центрирование div по центру родительского div

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

Отправить без регистрации

Отправить без регистрации

Как выровнять контент div по нижней границе

Результат нашего кода

Пример

Пример

Пример

Пример

Пример

html — Как я могу центрировать div внутри другого div?

CSS

HTML

HTML

CSS

Как?

Здравствуйте! Текст в центре

html — Центрировать несколько div в другом div?