NullPointerException
s - исключения, возникающие при попытке использовать ссылку, которая указывает на отсутствие местоположения в памяти (null), как если бы она ссылалась на объект. Вызов метода по нулевой ссылке или попытка получить доступ к полю нулевой ссылки вызовет функцию NullPointerException
. Они наиболее распространены, но другие способы перечислены на странице NullPointerException
javadoc.
Вероятно, самый быстрый пример кода, который я мог бы придумать для иллюстрации NullPointerException
, be:
public class Example {
public static void main(String[] args) {
Object obj = null;
obj.hashCode();
}
}
В первой строке внутри main
я явно устанавливаю ссылку Object
obj
равной null
. Это означает, что у меня есть ссылка, но она не указывает на какой-либо объект. После этого я пытаюсь обработать ссылку так, как если бы она указывала на объект, вызывая метод на нем. Это приводит к NullPointerException
, потому что нет кода для выполнения в местоположении, на которое указывает ссылка.
(Это техничность, но я думаю, что она упоминает: ссылка, которая указывает на null, равна 't то же, что и указатель C, указывающий на недопустимую ячейку памяти. Нулевой указатель буквально не указывает на в любом месте , который отличается от указаний на местоположение, которое оказывается недопустимым.)
На самом деле, в этом случае это довольно просто: примените вертикальное выравнивание к изображению. Поскольку это все в одной строке, это изображение, которое вы хотите выровнять, а не текст.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Проверено в FF3.
Теперь вы можете использовать flexbox для этого типа макета.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Во-первых, встроенный CSS вообще не рекомендуется, это действительно испортит ваш HTML.
Для выравнивания изображения и диапазона вы можете просто сделать vertical-align:middle
.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
Многолинейное решение:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Работает во всех браузерах и ie9 +
Это может сбить с толку, согласен. Попробуйте использовать функции таблицы. Я использую этот простой трюк CSS для позиционирования модалов в центре веб-страницы. Он имеет большую поддержку браузера:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
и часть CSS:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Обратите внимание, что вам нужно стилизовать и настроить размер изображения и таблицы, чтобы он работал как ты желаешь. Наслаждайтесь.
Вы должны применить vertical-align: middle
к обоим элементам, чтобы они были идеально центрированы.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
Принимаемый ответ центрирует значок около половины x-высоты текста рядом с ним (как определено в спецификациях CSS ). Который может быть достаточно хорош, но может немного немного выглядеть, если в тексте есть восходящие или нисходящие линии, расположенные сверху или снизу:
[/g6]
Вкл. влево, текст не выровнен, справа он показан выше. Живая демонстрация может быть найдена в этой статье о вертикальном выравнивании .
Кто-нибудь говорил о том, почему vertical-align: top
работает в сценарии? Изображение в вопросе, вероятно, выше текста и, таким образом, определяет верхний край строки строки. vertical-align: top
на элементе span затем просто позиционирует его в верхней части строки строки.
Основное различие в поведении между vertical-align: middle
и top
заключается в том, что первый элемент перемещается относительно базовой линии (который размещается там, где необходимо для выполнения всех вертикальных выравниваний и, таким образом, чувствует себя скорее непредсказуемым ), а вторая относительна к внешним границам окна линии (что более ощутимо).
Для записи, «команды» выравнивания не должны работать в SPAN, потому что это тег в строке, а не тег уровня блока.
CSS делит HTML-теги на две группы: вложенные теги, поля, прокладки и т. Д., Не будут работать над встроенным тегом, поскольку точка inline не нарушает текстовый поток. line и block-level. Поиск «css block vs inline» и отличная статья появляется ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Понимание основных принципов CSS - это ключ к тому, что он не настолько раздражает)
text-align
и vertical-align
(за исключением его применения в td
элементах для устаревших целей) специально предназначены для элементов inline
и inline-block
(span
, img
и т. д.).
– Kevin Peno
15 June 2012 в 18:45
Еще не видели решения с margin
в любом из этих ответов, так что вот мое решение этой проблемы.
Это решение работает только если вы знаете ширина вашего изображения.
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
На кнопке в jQuery mobile, например, вы можете немного ее настроить, применив этот стиль к изображению:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
Измените div
на контейнер гибкого диска:
div {display:flex;}
Теперь есть два способа центрирования выравниваний для всего содержимого:
Способ 1:
div {align-items:center;}
Способ 2:
div * {margin-top:auto; margin-bottom:auto;}
Попробуйте использовать разные значения ширины и высоты в img
и разных значениях размера шрифта на span
, и вы увидите, что они всегда остаются в середине контейнера.
justify-content: center;
и для интервала (без использования тегов & lt; br / & gt;), вы также можете захотеть выбрасывать padding: 1em;
. Отличное обновление для современных браузеров.
– CSS
3 December 2015 в 02:39
Введите эти свойства span
span{
display:inline-block;
vertical-align:middle;
}
Используйте display:inline-block;
Когда вы используете свойство vertical-align
. Это ассоциированные свойства
Вот несколько простых методов для вертикального выравнивания:
Это легко: установите высоту строки текстового элемента в равный таковому для контейнера
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Абсолютно поместите внутренний div относительно его контейнера
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
Чтобы заставить это работать правильно по всем направлениям, придется немного взломать CSS. К счастью, есть ошибка IE, которая работает в нашу пользу. Устанавливая top:50%
на контейнере и top:-50%
на внутреннем div, вы можете добиться того же результата. Мы можем комбинировать эти два варианта с помощью другой функции, IE не поддерживает: расширенные селектора CSS.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Это решение требует немного более современного браузер, чем другие решения, поскольку он использует свойство transform: translateY
. ( http://caniuse.com/#feat=transforms2d )
Применение следующих трех строк CSS к элементу будет вертикально центрировать его внутри родителя независимо от высоты родительский элемент:
position: relative;
top: 50%;
transform: translateY(-50%);
display:table
и display:table-cell
CSS отлично работают, за исключением, конечно, в IE7 и ниже. После нескольких разрывов моих волос, я решил, что мне действительно не нужно иметь дело с тем, кто все еще использовал IE7.
– banncee
3 April 2013 в 14:51
display:table
имеет некоторые ограничения в разных браузерах (в IE11 max-height
не работает, если элемент находится внутри ячейки таблицы), поэтому в некоторых случаях края не рекомендуется выравнивать по вертикали с помощью ячеек таблицы.
– jahu
28 April 2015 в 12:20
Техника, используемая в принятом ответе, работает только для однострочного текста ( demo ), но не для многострочного текста ( demo ) - как отмечено там.
Если кому-то нужно вертикально центрировать многострочный текст на изображение, вот несколько способов (методы 1 и 2, вдохновленные этой статьей CSS-Tricks )
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
CSS (вышеупомянутая скрипта содержит префиксы поставщика):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Вероятно, вы захотите этого:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
Как и другие, попробуйте vertical-align
на изображении:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS не раздражает. Вы просто не читаете документацию . ; Р
Вы можете установить изображение как inline element
с помощью свойства display
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Используйте line-height:30px
для диапазона, чтобы текст совпадал с изображением:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
span
. См. мой ответ . – Mori 24 March 2014 в 10:06