中心垂直的div的内容（不是行高） [英] center vertically the content of a div ( not by line-height )

问题描述

我有一个div，我需要垂直居中它的内容：

I have a div which I need to center vertically its content:

<div draggable="false" id="coffee">Free coffee for all the people who visit my restaurant</div>

#coffee {
        line-height: 235px;
        width: 300px;
    }

div {
    position: absolute;
    overflow: auto;
    text-align: left;
    font-size: 23px;
    color: rgb(26, 66, 108);
    font-family: roboto, Helvetica;
    font-style: normal;
    font-weight: bold;
    -webkit-transition: none;
    transition: none;
    left: 0px;
    top: 67.125px;
    height: 234.93749999999997px;
    opacity: 1;
}

它使用line-height工作，但在跳转线中，

It works by using line-height, but in the jump line, the phrase is too separated, and I need that it's not separated.

这是小提琴链接： http://jsfiddle.net/2Mb39/4/

丹尼尔

推荐答案

您必须添加第二个div才能实现此目的。

You have to add a second div to achieve this.

<div draggable="false" id="coffee" style="position: absolute; overflow: auto; text-align: left; font-size: 23px; color: rgb(26, 66, 108); font-family: roboto, Helvetica; font-style: normal; font-weight: bold; -webkit-transition: none; transition: none; left: 0px; top: 67.125px; height: 234.93749999999997px; opacity: 1;">
    <div class="inner">
    Free coffee for all the people who visit my restaurant
    </div>
</div>

#coffee {
    display: table;
    width: 300px;
    background-color: red;
}
#coffee .inner{
    vertical-align: middle;   
    display: table-cell;
}

示例： http://jsfiddle.net/2Mb39/12/

这篇关于中心垂直的div的内容（不是行高）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！