Css картинка по вертикали по центру: Как отцентрировать картинку по вертикали внутри блока с динамической высотой? — Хабр Q&A

Leave a Comment / Css / By /

Html,css -картинки по вертикали — Stack Overflow на русском

Нужно чтобы картинки были по центру, но все ни как не получается…

* {
  font-family: 'Planet N', arial;
  text-decoration: none;
}


/* ВЕРХНЯЯ ПАНЕЛЬ (ПОЛОСКА)*/

.clearfix:after {
  content: '';
  display: table;
  width: 100%;
  clear: both;
}

body {
  margin: 0 auto;
  padding: 0;
}

div {
  box-sizing: border-box;
}

header {
  background: url(../img/1.jpg) no-repeat center top / cover;
  height: 100vh;
}

.container {
  width: 930px;
  margin: 0 auto;
}

.logo {
  margin-top: 41px;
  float: left;
}

nav {
  float: right;
  margin-top: 45px;
}

.menu {
  padding: 0;
  margin: 0;
  display: block;
}

.menu li {
  float: left;
  display: block;
  margin-right: 41px;
}

.
 
 menu a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

.titles__first {
  font-size: 40px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-top: 150px;
}

h2 {
  font-size: 75px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin: 15px;
  padding-top: 60px;
}

.button {
  background: #fed136;
  color: #484543;
  border-radius: 3px;
  display: block;
  width: 240px;
  padding: 20px 0;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
  margin-top: 50px;
}

.title {
  padding-top: 115px;
}

.title h3 {
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

.
  title p {
  color: #777777;
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
}

.servises_item {
  width: 270px;
  float: left;
  text-align: center;
}

.servises_item p {
  color: #777777;
  font-size: 20px;
  line-height: 1.9em;
}

.servises_item h4 {
  font-size: 18px;
  margin-bottom: 15px;
}

.servises_item:last-child {
  float: right;
}

.servises_item:nth-child(2) {
  margin-left: 60px;
}

.servises {
  margin-top: 80px;
}

#portfolio {
  background: #F7F7F7;
  padding-bottom: 120px;
}

#servises {
  padding-bottom: 120px;
}

.works img {
  float: left;
}

.works img:last-child {
  float: right;
}

.works img:nth-child(2) {
  margin-left: 23px;
}

.humble {
  margin-top: 80px;
  width: 200px;
  text-align: center;
}

.
 
 humble_item p {
  color: #777777;
  font-size: 15px;
}

.humble h3 {
  font-size: 15px;
}

.humble_item img {
  margin-right: 200px;
}

footer {
  text-align: center;
  padding-top: 100px;
}
<section>
  <div>
    <div>
      <h3>Обо мне</h3>
      <p>
        Сейчас придумаю ...
      </p>
    </div>
    <div>
      <div>
        <img src="assets/img/about1.jpg">
        <img src="assets/img/about2.jpg">
        <img src="assets/img/about3.jpg">
      </div>
      <div>
        <h3>July 2010</h3>
        <h3>Our humble beginnigs</h3>
        <p>TUTA PEZDA WASHE</p>
      </div>
      <div>
        <h3>Junaty 2011</h3>
        <h3>Our humble beginnigs</h3>
        <p>TUTA PEZDA WASHE</p>
      </div>
      <div>
        <h3>december 2012</h3>
        <h3>Our humble beginnigs</h3>
        <p>TUTA PEZDA WASHE</p>
      </div>
    </div>
  </div>
</section>
  • html
  • css

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

 
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.item {
  background-color: green;
  width: 200px;
  height: 100px;
  margin: 4px;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

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

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

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

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

Почта

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

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

Почта

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

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

Как выровнять содержимое по вертикали в Divi

Возможность вертикального выравнивания содержимого при создании сайта с помощью Divi может стать удобным дополнением к вашему набору инструментов для дизайна. Иногда определенный макет требует, чтобы содержимое было выровнено по вертикали по-разному (по центру, внизу, вверху). Наиболее распространенной потребностью является вертикальное центрирование вашего контента. Это обеспечивает восхитительное прикосновение симметричного интервала, которое действительно пригодится при использовании нескольких макетов столбцов для вашего контента. Кроме того, центрированный по вертикали контент остается центрированным в браузерах разной ширины, что избавляет от рутинной работы по применению настраиваемых отступов или полей для получения аналогичного отклика.

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

  • 1 Понимание Flex и Divi
  • 2 Это действительно необходимо?
  • 3 Загрузите готовый макет на свою страницу
  • 4 Способ 1.
    Как выровнять контент по вертикали с помощью Flex и Auto Margin
    • 4.1 Выравнивание содержимого по нижнему краю
    • 4.2 Выравнивание содержимого по вертикали для всех столбцов в строке
  • 5 Метод 2: Вертикальное выравнивание содержимого с использованием направления изменения столбца
  • 6 Создание аннотаций с различным количеством текста, выровненного по вертикали
  • 7 Как насчет макетов с одной колонкой?
  • 8 Множество приложений
  • 9Последние мысли

Понимание Flex и Divi

Свойство css Flex (или Flexbox) — это просто способ позиционирования элементов в горизонтальном и/или вертикальном стеках (что-то вроде таблицы). За исключением того, что, в отличие от традиционных таблиц, свойство flex позволяет создавать поля, которые подстраиваются или «изгибаются» в зависимости от размера содержащегося в них содержимого.

Divi использует свойство flex всякий раз, когда вы выбираете «Выровнять высоту столбцов» в качестве настройки строки.

Это просто гарантирует, что размер ваших столбцов будет соответствовать размеру столбца с наибольшим содержанием. А поскольку «Equalize Column Heights» активирует flex для контейнера строк, вы можете легко воспользоваться этим, добавив css в свои столбцы, чтобы настроить содержимое каждого столбца (или блока).

Например, если вы добавите «margin: auto» к любому столбцу в строке, содержимое этого столбца (будь то один или несколько модулей) будет центрировано по вертикали.

Кроме того, если вы добавите «align-items:center;» к вашей строке, все ваши столбцы (и их содержимое) будут центрированы по вертикали.

Конечно, свойство flex используется в веб-дизайне во многих других случаях наряду с более продвинутым CSS, который вы можете применить к своей теме. Но для этого урока я хотел, чтобы все было просто.

Это действительно необходимо?

Технически нет. Вы можете вертикально выровнять свой контент/модули внутри столбца, используя настраиваемый интервал (отступы и поля). Например, вы можете использовать параметры интервала Divi, чтобы дать столбцу одинаковое верхнее и нижнее заполнение, чтобы центрировать модуль (модули) по вертикали внутри столбца. Или вы можете добавить только верхний отступ к столбцу, чтобы выровнять содержимое по нижнему краю. Однако вам, возможно, придется отрегулировать интервал при обновлении страницы дополнительным содержанием. Кроме того, может быть сложно сохранить это выравнивание в браузерах разной ширины.

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

Начнем!

Загрузите готовый макет на свою страницу

Для начала я собираюсь использовать макет страницы портфолио компании по дизайну интерьера. Чтобы получить этот макет на своей странице, создайте новую страницу. Затем дайте название своей странице. Нажмите «Использовать Divi Builder», а затем «Использовать Visual Builder». Затем выберите опцию «Выбрать готовый макет».

Затем выберите пакет макетов компании по дизайну интерьера во всплывающем окне «Загрузить из библиотеки». Наконец, выберите страницу портфолио из списка макетов и нажмите «Использовать этот макет».

После загрузки макета на вашу страницу вы готовы к работе.

Метод 1: вертикальное выравнивание содержимого с помощью Flex и Auto Margin

Открыть настройки строки второй строки на странице (той, что находится непосредственно под строкой с заголовком страницы). В настройках дизайна откройте группу параметров «Размер» и обратите внимание, что «Выровнять высоту столбцов» уже активна. Это означает, что к строке теперь добавлено свойство flex («display: flex;»).

Теперь перейдите к настройкам вкладки «Дополнительно» для той же строки и добавьте следующий фрагмент CSS под поле ввода «Основной элемент столбца 2».

поле
: авто;

Теперь содержимое второго столбца сместилось и стало центрироваться по вертикали.

Выравнивание содержимого по нижнему краю

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

поле
: авто авто 0;

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

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

 элементов выравнивания: по центру;

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

 элементов выравнивания: flex-end;

И не забывайте, что вы можете воспользоваться функцией расширения стилей Divi, щелкнув правой кнопкой мыши основной элемент с фрагментом CSS и выбрав «Расширить основной элемент».

Затем расширьте этот основной элемент css на все строки на странице (или в разделе), чтобы центрировать по вертикали все содержимое каждого столбца на странице.

Теперь все центрировано по вертикали.

Но вы могли заметить, что белый цвет фона столбца больше не охватывает всю высоту строки. Это потому, что мы добавили в столбец «margin: auto». Чтобы исправить это, вы можете изменить цвет фона строки на белый и избавиться от заполнения строки. Но вместо этого я покажу вам способ центрировать содержимое вашего столбца, не изменяя поля.

Метод 2: Вертикальное выравнивание содержимого с использованием направления изменения столбца

В первом методе мы воспользовались свойством flex, добавленным к строке. Это сделало каждый из наших столбцов «гибким блоком», который можно выровнять по вертикали, просто отрегулировав поле.

Но есть также способ использования flex-direction для выравнивания содержимого нашего столбца без потери эффекта «Выровнять высоту столбца», который поддерживает одинаковый размер наших столбцов (и фона столбцов). Для этого мы просто добавим несколько строк CSS в наш столбец, чтобы все модули внутри столбца были сложены вертикально, а затем центрированы.

Вернемся к нашей строке в предыдущем примере. Откройте настройки строки и удалите любой пользовательский CSS, который у вас может быть, щелкнув правой кнопкой мыши Пользовательский CSS и выбрав «Сбросить пользовательские стили CSS»

.

Затем добавьте следующий CSS под основным элементом столбца 2:

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

Или, если я хочу выровнять содержимое по нижнему краю, просто измените «justify-content: center» на «justify-content: flex-end».

Что хорошо в этой настройке, так это то, что если у меня есть содержимое, центрированное по вертикали, и я делаю строку на всю ширину, содержимое остается по центру.

Создание аннотаций с различным объемом текста, выровненного по вертикали

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

В этом примере я собираюсь вертикально выровнять аннотации на макете домашней страницы Digital Payments.

Сначала я добавлю к аннотациям различный объем основного текста, чтобы дать более реалистичное представление о том, как может выглядеть сайт.

Теперь мне нужно перейти к настройкам строк и «Выровнять высоту столбцов».

Теперь я могу добавить свои фрагменты CSS, чтобы выровнять содержимое и изменить дизайн.

На вкладке «Дополнительно» в настройках строки мы можем вертикально центрировать содержимое наших столбцов, добавив следующее в «Основной элемент»:

 элементов выравнивания: по центру;

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

 элементов выравнивания: flex-end;

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

Столбец 1 Основной элемент CSS:

поле
: авто авто 0;

Основной элемент столбца 3 CSS:

 поле: 0 авто авто;

Как насчет макетов с одним столбцом?

Технически вам не нужен фрагмент CSS или flex, чтобы центрировать содержимое одного столбца по вертикали. Все, что вам нужно сделать, это убедиться, что у вас одинаковое расстояние над и под вашим контентом (или модулями). В большинстве случаев людям нужен вертикальный центрированный контент в макетах с несколькими столбцами, потому что они хотят, чтобы смежный контент идеально выровнялся.

Множество приложений

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

Заключительные мысли

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

Не стесняйтесь делиться своими идеями и комментариями ниже.

Привет!

Вертикальное выравнивание по центру изображения при начальной загрузке. · GitHub

Вертикальное выравнивание по центру изображения при начальной загрузке.

Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode

Показать скрытые символы

html,тело,.контейнер {
высота: 100%;
}
.контейнер {
дисплей: таблица;
}
.строка
{
высота: 100%;
дисплей: таблица-строка;
}
. вертикальный центр
{
дисплей: таблица-ячейка;
поплавок: нет;
вертикальное выравнивание: посередине;
}

Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode

Показать скрытые символы

<дел>
<дел>
<дел>

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

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