Это потому, что в вашем запросе была ошибка. MySQli->query()
вернет false при ошибке. Измените его на что-то вроде ::
$result = $this->database->query($query);
if (!$result) {
throw new Exception("Database Error [{$this->database->errno}] {$this->database->error}");
}
Это должно вызвать исключение, если есть ошибка ...
Ничего себе, эта проблема популярна. Это основано на недоразумении в vertical-align
свойство. Эта превосходная статья объясняет его:
Понимание vertical-align
, или, "Как (Не) Вертикально Центрировать Содержание" Gavin Kistner.
“How для центрирования в CSS” является большим веб-инструментом, который помогает найти необходимый CSS, центрируя атрибуты для различных ситуаций.
<час>Вкратце <глоток> (и предотвратить гниль ссылки) глоток> :
vertical-align: middle
. Однако “context” isn’t общая высота родительского контейнера, it’s высота текстовой строки they’re в. jsfiddle пример absolute
и определить ее height
, margin-top
и top
положение. jsfiddle пример line-height
для заполнения его высоты. Этот метод довольно универсален, по моему опыту. jsfiddle пример <div id="header" style="display: table-cell; vertical-align:middle;">
...
или покрытие браузера CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
По умолчанию 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>
Все они должны быть вертикально выровненные в отделении
Выровнены как ? Верхние части изображений, выровненных с верхней частью текста?
Одно из изображений должно быть абсолютно расположенный в отделении
Абсолютно расположенный относительно 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>
#3 способы сделать центральное дочернее отделение в родительском отделении
Преобразовывают/Переводят Метод
/* 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>