Вертикально центрирование текста в DIV

У меня есть этот HTML/CSS сниппет:Вертикально центрирование текста в DIV

.matrix-right-letter-container { 
 
\t font-size: 48px; 
 
} 
 

 

 
.matrix-place { 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t margin: 10px; 
 
} 
 

 
.matrix-input { 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t margin: 3px; 
 
\t vertical-align: bottom; 
 
}

<div class="matrix-line-container"> 
 
    <div id="matrix-c-place" class="matrix-place bracketed"> 
 
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> 
 
    </div> 
 
    <div id="matrix-a-place" class="matrix-place bracketed"> 
 
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> 
 
    </div> 
 
    <span class="matrix-right-letter-container">A</span> 
 
</div>

Мне нужно центрировать письмо вертикально в matrix-line-container. Но добавление vertical-align: middle в .matrix-right-letter-container не помогает. Как мне это сделать?

источник

2015-03-18 michaeluskov

Возможный дубликат [Как вертикально центрировать div для всех бровей ers?] (http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) –

Существует два способа сделать это по крайней мере. Конечно, способ CSS или использование некоторых JS.

вариант 1: CSS

теперь вы можете дать родительскому контейнеру текста промежутка display:table свойства и элемент, который вы хотите себе display:table-cell свойства вертикального выравнивания и выровнять его сверху, средние снизу и т.д.

фрагмент кода здесь:

.matrix-line-container { 
 
    background: grey; 
 
    display: table; /* See what I did here? */ 
 
} 
 
.matrix-right-letter-container { 
 
    font-size: 48px; 
 
    background: cyan; 
 
    display: table-cell; /* And also here*/ 
 
    vertical-align: middle; /* And here*/ 
 
} 
 
.matrix-place { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 10px; 
 
    background: pink; 
 
} 
 
.matrix-input { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 3px; 
 
    vertical-align: bottom; 
 
}

<div class="matrix-line-container"> 
 
    <div id="matrix-c-place" class="matrix-place bracketed">CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/> 
 
    </div> 
 
    <div id="matrix-a-place" class="matrix-place bracketed">CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/> 
 
    </div> <span class="matrix-right-letter-container">A</span> 
 

 
</div>

Теперь второй вариант,

Вариант 2: некоторые JS (на самом деле не рекомендуется, но если вы хотите получить фантазии, то, я думаю)

В этой опции вы просто хотите, чтобы найти высоту высота родительского элемента div (я использовал jQuery, просто потому, что мне это нравится, вот и все, что облегчает мой ввод. Теперь у вас есть дополнительные опции только height() или innerHeight() или outerHeight(). Используйте его, как вам нравится, в зависимости от конкретного случая). Когда у вас есть высота родительского элемента div, просто примените эту высоту к вашему элементу span как line-height и Voila! вот оно!

Теперь фрагмент коды для второго фанки варианта

// Obviously I added some script - What else did you think I was gonna do?!! 
 

 
var divht = $('.matrix-line-container').innerHeight() + 'px'; /* DO NOT forget to add that little 'px' to the end or else it wont work! */ 
 
$('.matrix-right-letter-container').css("line-height", divht);

.matrix-line-container { 
 
    background: grey; 
 
} 
 
.matrix-right-letter-container { 
 
    font-size: 48px; 
 
    background: cyan; 
 
} 
 
.matrix-place { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 10px; 
 
    background: pink; 
 
} 
 
.matrix-input { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 3px; 
 
    vertical-align: bottom; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="matrix-line-container"> 
 
    <div id="matrix-c-place" class="matrix-place bracketed">CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/> 
 
    </div> 
 
    <div id="matrix-a-place" class="matrix-place bracketed">CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/>CONTENT 
 
    <br/> 
 
    </div> <span class="matrix-right-letter-container">A</span> 
 

 
</div>

Надеется, что это дал вам о чем подумать;)

Надеется, что это помогает и Счастливых кодированиям

источник

2015-03-18 15:56:48 Sai

О, спасибо! Оно работает! Но не могли бы вы описать логику браузера, если он найдет в блоке 'block',' inline-block' и 'table-cell', смешанные в' table'? И почему это работает так, как мне нужно? – michaeluskov

Вы должны vertical-align: middle все инлайн-блоки для вертикального выравнивания все они по отношению друг к другу

.matrix-right-letter-container { 
 
\t font-size: 48px; 
 
} 
 

 

 
.matrix-place { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t margin: 10px; 
 
} 
 

 
.matrix-input { 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t margin: 3px; 
 
\t vertical-align: bottom; 
 
}

<div class="matrix-line-container"> 
 
    <div id="matrix-c-place" class="matrix-place bracketed"> 
 
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> 
 
    </div> 
 
    <div id="matrix-a-place" class="matrix-place bracketed"> 
 
    CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> 
 
    </div> 
 
    <span class="matrix-right-letter-container">A</span> 
 
</div>

источник

2015-03-18 15:39:24

Вертикально центрирование текста в DIV

ответ

Смежные вопросы