Float по центру: Выравнивание блоков по центру в CSS

html — Как центрировать float элементы по вертикали?

Как центрировать float элементы по вертикали? Использование vertical-align: middle не помогает.

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

.navigation {
  background-color: #ddd;
  padding: 40px;
  vertical-align: middle;
}

.logo_box {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #addddd;
  vertical-align: middle;
}

nav {
  float: right;
  vertical-align: middle;
}

ul > li {
  display: inline-block;
}

ul > li > a {
  text-transform: uppercase;
  text-decoration: none;
  color: #512422;
  margin-left: 30px;
}

<div>
  <div>some logo</div>
  <nav>
    <ul>
      <li><a href="#">Line1</a></li>
      <li><a href="#">Line2</a></li>
      <li><a href="#">Line3</a></li>
      <li><a href="#">Line4</a></li>
    </ul>
  </nav>
</div>

Ссылка на сниппет

• html
• css
• вёрстка
• центрирование

Идеальный способ это сделать — это с помощью flexbox:

. navigation {
  background-color: #ddd;
  padding: 40px;
  display: flex;
  align-items: center;
}

.logo_box {
  width: 200px;
  height: 100px;
  background-color: #addddd;
}

ul > li {
  display: inline-block;
}

ul > li > a {
  text-transform: uppercase;
  text-decoration: none;
  color: #512422;
  margin-left: 30px;
}

<div>
  <div>some logo</div>
  <nav>
    <ul>
      <li><a href="#">Line1</a></li>
      <li><a href="#">Line2</a></li>
      <li><a href="#">Line3</a></li>
      <li><a href="#">Line4</a></li>
    </ul>
  </nav>
</div>

Если нет возможности использовать flexbox, то используйте display: table для контейнера и display: table-cell для дочерних элементов.

.navigation {
  background-color: #ddd;
  padding: 40px;
  display: table;
}

.logo_box,
nav {
  vertical-align: middle;
  display: table-cell;
}

.logo_box {
  width: 200px;
  height: 100px;
  background-color: #addddd;
  vertical-align: middle;
  display: table-cell;
}

ul > li {
  display: inline-block;
}

ul > li > a {
  text-transform: uppercase;
  text-decoration: none;
  color: #512422;
  margin-left: 30px;
}

<div>
  <div>some logo</div>
  <nav>
    <ul>
      <li><a href="#">Line1</a></li>
      <li><a href="#">Line2</a></li>
      <li><a href="#">Line3</a></li>
      <li><a href="#">Line4</a></li>
    </ul>
  </nav>
</div>

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

Можно использовать свойство line-height или padding

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

.navigation {
  background-color: #ddd;
  padding: 40px;
  vertical-align: middle;
}

.logo_box {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #addddd;
  vertical-align: middle;
}

nav {
  float: right;
  vertical-align: middle;
  /**/
  line-height: 100px;
}

nav ul {
  margin: 0;
  padding: 0;
}

ul > li {
  display: inline-block;
  
}

ul > li > a {
  text-transform: uppercase;
  text-decoration: none;
  color: #512422;
  margin-left: 30px;
}

<div>
  <div>some logo</div>
  <nav>
    <ul>
      <li><a href="#">Line1</a></li>
      <li><a href="#">Line2</a></li>
      <li><a href="#">Line3</a></li>
      <li><a href="#">Line4</a></li>
    </ul>
  </nav>
</div>

2

Вы можете это достичь с помощью

nav {
  display: flex;
  flex-direction: column;
}

2

Подойдет такой вариант?

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

.navigation {
  background-color: #ddd;
  padding: 40px;
  vertical-align: middle;
}

.logo_box {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #addddd;
  vertical-align: middle;
}

nav {
  float: right;
  vertical-align: middle;
  
}
nav:before{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}
ul > li {
  display: inline-block;
  vertical-align: middle;
  
}

ul > li > a {
  text-transform: uppercase;
  text-decoration: none;
  color: #512422;
  margin-left: 30px;
}

<div>
  <div>some logo</div>
  <nav>
    <ul>
      <li><a href="#">Line1</a></li>
      <li><a href="#">Line2</a></li>
      <li><a href="#">Line3</a></li>
      <li><a href="#">Line4</a></li>
    </ul>
  </nav>
</div>

1

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

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

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

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

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

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

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

Почта

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

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

css — Как выровнять float элементы

Вопрос задан

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

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

Добрый день, начал изучать верстку и вот столкнулся с такой проблемой. Мне нужно выровнять элементы в шапке по центру по вертикали, но загвоздка в том что одна группа элементов имеет свойство float:left. Сначала я не понял в чем проблема, затем нашел одну из обучающих статей, где пишется что к float — vertical-align не применяется. Теперь я не знаю что делать. На картинке отображено что мне нужно сделать.

Мой код: https://codepen.io/chegonenko/pen/dpLJQb

• css
• float

2

Вы прочитали верно, но это не относится к вашему примеру. В вашем случае свойства float влияет только на элементы .l_part, .l_part, но не на их содержимое. Вам нужно лишь выровнять внутренности этих блоков. А так как все внутренние блоки у вас со свойствами inline-block, то они могут быть выровнены между собой.

1. Всем внутренним inline-block‘ам задаем vertical-align: middle, чтобы они выровнялись между собой попарно. (.picture, .l_text, .r_text, .phone)
2. Для картинки задаем свойство display: block, чтобы она под собой не добавляла пустое пространство, что испортит выравнивание(читайте об этом отдельно, например здесь)
3. Внутрь заголовка .header после зафлоченых элементов — то есть в конец в вашем случае добавляем <div> со свойством clear: both, чтобы очистить обтекания. (что это и зачем это нужно делать читайте отдельно, например здесь)

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

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

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

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

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

Почта

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

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

Почта

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

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

Почему в CSS нет плавающего центра?

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

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

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

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

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

• css
• css-поплавок

4

Вместо использования float: left используйте display: inline-block для отдельных элементов и центрируйте их контейнер.

http://jsfiddle.net/ExplosionPIlls/rAkNY/5/

1

Да, Float center/middle не существует, и, возможно, у W3C есть ответ.

Тег

 раздел {
белый цвет;
отступ: 5px;
}
#синийРаздел {
цвет фона: dodgerblue;
}
#orangeDiv {
цвет фона: оранжевый;
} 

 

<голова>


<тело>
этот div расположен не по центру


<центр>
этот div расположен по центру!


 

 .mydivclass {
    поле: 0 авто;
 }
 

 
    <дел>
  
 

 .x{
   ширина: 140 пикселей;
   положение: абсолютное;
   верх: 0px;
   слева: 50%;
   поле слева: -70px; /*половина ширины*/
}