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

Это потому, что в вашем запросе была ошибка. MySQli->query() вернет false при ошибке. Измените его на что-то вроде ::

$result = $this->database->query($query);
if (!$result) {
    throw new Exception("Database Error [{$this->database->errno}] {$this->database->error}");
}

Это должно вызвать исключение, если есть ошибка ...

679
задан Abdu 19 December 2018 в 07:50
поделиться

5 ответов

Ничего себе, эта проблема популярна. Это основано на недоразумении в vertical-align свойство. Эта превосходная статья объясняет его:

Понимание vertical-align, или, "Как (Не) Вертикально Центрировать Содержание" Gavin Kistner.

“How для центрирования в CSS” является большим веб-инструментом, который помогает найти необходимый CSS, центрируя атрибуты для различных ситуаций.

<час>

Вкратце <глоток> (и предотвратить гниль ссылки) :

  • Встроенные элементы [только 1 113] встроенные элементы) могут быть вертикально выровненные в их контексте через vertical-align: middle. Однако “context” isn’t общая высота родительского контейнера, it’s высота текстовой строки they’re в. jsfiddle пример
  • Для элементов блока, выравнивание по вертикали более трудно и сильно зависит от определенной ситуации:
    • , Если внутренний элемент может иметь зафиксированная высота , можно сделать ее положение absolute и определить ее height, margin-top и top положение. jsfiddle пример
    • , Если элемент в центре состоит из одной строки и , его родительская высота фиксируется , можно просто установить container’s line-height для заполнения его высоты. Этот метод довольно универсален, по моему опыту. jsfiddle пример
    • †¦ существует больше таких особых случаев.
835
ответ дан Konrad Rudolph 19 December 2018 в 07:50
поделиться
<div id="header" style="display: table-cell; vertical-align:middle;">

...

или покрытие браузера CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

-8
ответ дан Joe 19 December 2018 в 07:50
поделиться

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

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

#header > h1 { display: inline; }

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

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

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

ОБНОВЛЕНИЕ:

Вот полный пример, который работает над 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
ответ дан Mike Tunnicliffe 19 December 2018 в 07:50
поделиться

Все они должны быть вертикально выровненные в отделении

Выровнены как ? Верхние части изображений, выровненных с верхней частью текста?

Одно из изображений должно быть абсолютно расположенный в отделении

Абсолютно расположенный относительно DIV? Возможно, Вы могли изобразить схематически то, что Вы ищете...?

фарадей описал шаги для абсолютного расположения, а также корректировки дисплея H1 элемент, таким образом, что изображения будут казаться встроенными с ним. К этому я добавлю, что можно выровнять изображения при помощи эти vertical-align стиль:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... это соединило бы заголовок и изображения с главными выровненными краями. Другие опции выравнивания существуют; см. документацию . Вы могли бы также найти его выгодным, чтобы отбросить DIV и переместить изображения в H1 элемент - это предоставляет семантическое значение контейнеру и устраняет необходимость скорректировать дисплей H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
16
ответ дан Community 19 December 2018 в 07:50
поделиться

#3 способы сделать центральное дочернее отделение в родительском отделении

  • Абсолютный Метод Расположения
  • Метод Flexbox
  • Преобразовывают/Переводят Метод

    enter image description here

    Демонстрация

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>
0
ответ дан 22 November 2019 в 21:33
поделиться