Как вертикально центрировать содержание с переменной высотой в отделении?

Question

Как вертикально центрировать содержание с переменной высотой в отделении?

Как будто вы пытаетесь получить доступ к объекту, который является null. Рассмотрим ниже пример:

TypeA objA;

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

См. Также этот пример:

String a = null;
System.out.println(a.toString()); // NullPointerException will be thrown

156

css vertical-alignment

задан sandyJoshi 12 December 2017 в 08:32

2 ответа

Другие вопросы по тегам:

css vertical-alignment

Похожие вопросы:

score 16 · Answer 1

Это - что-то, что я должен был много раз делать, и единое решение все еще требует, чтобы Вы добавили немного несемантической разметки и некоторый браузер определенные взломы. Когда мы получим поддержку браузера для css 3, Вы получите свое вертикальное центрирование без прегрешения.

Для лучшего объяснения техники можно посмотреть статья, я адаптировал его от , но в основном это включает добавление дополнительного элемента и применение различных стилей в IE и браузерах, которые поддерживают position:table\table-cell на элементах нетаблицы.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

существует много путей (взломы) для применения стилей в определенных наборах браузеров. Я использовал условные комментарии, но посмотрите на статью, связанную выше для наблюдения двух других методов.

Примечание: существуют простые способы получить вертикальное центрирование, если Вы знаете некоторые высоты заранее, при попытке центрировать одну строку текста, или в нескольких других случаях. Если у Вас есть больше деталей, тогда добавляют их, потому что может быть метод, который не требует взломов браузера или несемантической разметки.

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

score 1 · Answer 2

Для меня лучший способ сделать это:

.container{
  position: relative;
}

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

преимущество не должно делать высоту явной