Текст центра вертикально внутри <DIV>

У меня есть элемент <div> с фиксированной высотой, и я хотел бы центрировать некоторый текст по вертикали внутри этого элемента.

Я пытался следовать инструкциям http://phrogz.net/css/vertical-align/index.html. Однако, похоже, это не работает для меня.

Я опубликовал то, что я пытаюсь использовать http://jsfiddle.net/scwebgroup/74Rnq/. Если я изменил верхний край HeaderBrand на -22px, это кажется правильным.

Кто-нибудь может понять, почему техника, описанная в статье, не работает так, как ожидалось для меня?

Примечание. Лучший ответ here работает только в том случае, если текст не переносится во вторую строку.

Ответы

Ответ 1

Это:

<!DOCTYPE html>
<style>
  .outer { outline: 1px solid #eee; }
  .outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>

<div class="outer">
  <p>This text will be vertically aligned</p>
</div>

<div class="outer">
  <p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>

работает в современных браузерах, независимо от того, содержит ли текст только одну или несколько строк.

Также обновлен скрипт http://jsfiddle.net/74Rnq/135/ Не уверен, что вы делали с полем 625px слева, когда сама вещь составляла всего 150 пикселей в ширину... Немного подобрал вещи, удалив встроенный стиль и используя немного дополнений, а также.

Ответ 2

Вы можете попробовать установить высоту строки в высоту div, например:

<div style="height:200px;border:1px solid #000;"> 
    <span style="line-height:200px;">Hello world!</span> 
</div>

Вот еще один способ, который работает:

#vertical{
    position:absolute;
    top:50%;    
    left:0;
    width:100%;
}

<div style="position:relative;height:200px;">
    <div id="vertical">
        Hello world!
    </div>              
</div>

Ответ 3

Я знаю, что этот метод добавляет некоторый HTML, но, похоже, он работает во всех основных браузерах (даже IE7 +).

Основная структура HTML

<div id="hold">
  <div>Content</div>
  <div class="aligner">&nbsp;</div>
</div>

Требовать CSS

#hold{
    height:400px;
}
div{
    display:        -moz-inline-stack;
    display:        inline-block;
    zoom:            1;
    *display:        inline;
    vertical-align:middle;
}
.aligner{
    width:0px;
    height:100%;
    overflow:hidden;
}

jsFiddle

Ответ 4

Как показано ниже, вы можете просто установить родительский элемент текстового элемента в положение: relative, а сам текстовый элемент - в положение: absolute; Затем используйте свойства направления для перемещения по тексту внутри родителя. См. Примеры ниже...

<!--Good and responsive ways to center text vertically inside block elements-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Centered Text&reg;</title>
<style type="text/css">
@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Helvetica;
}

#wrapper {
	width: 100%;
	height: auto;
}

#wrapper > div {
	margin: 40px auto;
	overflow: hidden;
  	position: relative;
  	height: 100px;
  	width: 50%;
}

p {
	position: absolute;
	word-wrap: break-word;
	text-align: center;
	color: white;
	background-color: rgba(0,0,0,0.5);
}

#parent1 {
  background-color: orange;
}

#parent1 p {
  	top: 10px;
  	bottom: 10px;
  	left: 10px;
  	right: 10px;
  	height: auto;
  	width: auto;
  	padding-top: 30px; /* Parent1 height * 0.5 = parent1 p padding-top (Adjust to make look more centered) */
}

#parent2 {
	background-color: skyblue;

}

#parent2 p {
	left: 50%;
	top: 50%;
	padding: 10px;
	transform: translate(-50%, -50%);
}

#parent3 {
	background-color: hotpink;
}

#parent3 p {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="parent1">
		<p>Center Method 1</p>
	</div>
	<div id="parent2">
		<p>Center Method 2</p>
	</div>
	<div id="parent3">
		<p>Center Method 3</p>
	</div>
</div>
</body>
</html>

Ответ 5

Один из способов с вашей текущей настройкой - установить margin-top на -25%

http://jsfiddle.net/ycAta/

единственная причина, по которой это выглядит ослепительно, состоит в том, что позиция основана на верхней части текста, и есть необходимый пробел, потому что не все буквы имеют одинаковую высоту.

Как исправление вручную -30% выглядит лучше.: P

Ответ 6

Мне не удалось определить причину, по которой код в статье, на которую я ссылался, не будет работать для меня. Несколько человек предложили ответы, но ничто не показалось мне надежным в браузерах.

В конечном счете, я решил оставить текст на одной строке, что мне не нравится. Но мне нужна моя техника, чтобы быть ясными и понятными, и чтобы она работала надежно.

Ответ 7

Недавно я был рад найти, что Flexbox может справиться с этой проблемой для вас. Класс flex-center в CSS ниже будет центрировать ваш текст div, как по вертикали, так и по горизонтали. Пример выглядит немного разбитым, поэтому я рекомендую изменить размер окна до тех пор, пока граница div не будет скрыта в тексте.

Насколько вы можете избежать использования Flexbox относительно совместимости, см. Могу ли я использовать...

Я не совсем понимаю, почему это работает, и если у кого-то есть более глубокое понимание механизмов гибкой коробки, мне бы понравилось объяснение.

.border-boxed {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  /* This is just to make it look pretty */
  box-sizing: border-box;
  background: linear-gradient(135deg, 
    rgba(85,239,203,1) 0%,
    rgba(30,87,153,1) 0%,
    rgba(85,239,203,1) 0%,
    rgba(91,202,255,1) 100%);
  color: #f7f7f7;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: .8rem;
  
  /* Expand <body> to entire viewport height */
  height: 100vh;
  
  /* Arrange the boxes in a centered, vertical column */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


.box {
  width: 25%;
  height: 25%;
  border: 2px solid #f7f7f7;
  border-radius: 16px;
  margin: .5rem; 
  text-transform: uppercase;
  text-align: center;
}

.small {
  height: 8%; 
}

<div class="box large flexitem flex-center">
  Large Box. <br>
  So big. <br>
  My god.
</div>

<div class="box small flexitem flex-center">
  Smaller Box
</div>