Как вертикальное выравнивание элементов в div? - PullRequest
Новая
       114

Как вертикальное выравнивание элементов в div?

655 голосов
/ 17 сентября 2008

У меня есть div с двумя изображениями и h1. Все они должны быть вертикально выровнены внутри div, рядом друг с другом.

Одно из изображений должно быть absolute расположено внутри div.

Какой CSS необходим для работы во всех распространенных браузерах? 

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Ответы [ 26 ]

11 голосов
/ 18 января 2014

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

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Поддерживается даже в IE9.

с префиксами поставщика: 

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

3 голосов
/ 17 сентября 2008

По умолчанию h1 является элементом блока и будет отображаться в строке после первого img, что приведет к появлению второго img в строке, следующей за блоком.

Чтобы это не происходило, вы можете установить h1 для поведения линейного потока: 

#header > h1 { display: inline; }

Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для "известного размера", прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию - у меня позиция: относительная работает: 

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимально необходимые атрибуты для получения желаемого эффекта.

UPDATE:

Вот полный пример, который работает на Firefox 3: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
3 голосов
/ 16 декабря 2015

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

Я вложил несколько объектов в JSFiddle для примера, но основная идея такова:

HTML 

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS 

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Пример нескольких объектов:

HTML 

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS 

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Результат

Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3 голосов
/ 06 октября 2016

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

Пример HTML: 

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

И CSS: 

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Демо создано здесь: https://jsfiddle.net/xnjq1t22/

Это решение хорошо работает с отзывчивыми div height и width.

Примечание. Функция calc не проверена на совместимость со старыми браузерами.

2 голосов
/ 30 января 2018

Существует два способа выравнивания элементов по вертикали и горизонтали.

enter image description here

1. Bootstrap 4.3.X

для вертикального выравнивания: d-flex align-items-center

для горизонтального выравнивания: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3 

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>
2 голосов
/ 02 августа 2017

На сегодняшний день я нашел новый обходной путь для вертикального выравнивания нескольких текстовых строк в div с использованием CSS3 (и я также использую систему сетки bootstrap v3 для украшения пользовательского интерфейса), как показано ниже: 

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Насколько я понимаю, непосредственный родительский элемент текста, содержащего элемент, должен иметь некоторую высоту. Я надеюсь, что это вам тоже поможет. Спасибо!

1 голос
/ 02 октября 2013

Просто используйте таблицу из одной ячейки внутри div! Просто установите высоту ячейки и таблицы на 100%, и вы можете использовать выравнивание по вертикали.

Таблица из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместима с каменным веком!

0 голосов
/ 28 июля 2014

Я использую следующее решение (без позиционирования и без высоты строки), поскольку уже более года оно работает с IE 7 и 8. 

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0 голосов
/ 02 октября 2013

Только так: 

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Таблица из одной ячейки внутри div обрабатывает выравнивание по вертикали и обратно совместима с каменным веком!

0 голосов
/ 10 февраля 2016

Я парень .NET, который только начал заниматься веб-программированием. Я не использовал CSS (ну, немного). Я использовал небольшой JavaScript для выполнения вертикального центрирования вместе с функцией jcuery .css.

Я просто публикую все из своего теста. Это, вероятно, не слишком элегантно, но пока работает. 

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>
Страница:
...