Question

我想在文本中垂直和水平居中＆＃34; apple＆＃34;。我尝试了已经提出的每个解决方案（内部div，vertical-align，margin：auto ......）我只是不明白。

我认为问题出在下面。

#distance
{
 height:20%; 
 text-align: center;
 vertical-align: middle;
 font-size: 2em;
}

感谢。

Answer 1

这应该有效：

#distance
{
    height:20%; 
    text-align: center;
    margin-top: 10%;
    font-size: 2em;
}

Answer 2

JSFiddle - DEMO或SHOW

您需要额外div来扭曲div#distance代码。

<强> HTML：

<body>
    <div id="leftSide">
        <p>orange</p>
    </div>
    <div id="rightSide">
        <div class="div-p">
            <div id="distance">apple</div>
        </div>
        <div id="googleMap"></div>
    </div>
</body>

<强> CSS：

html, body {
    margin:0;
    padding:0;
    height:100%
}
.div-p {
    height: 20%;
    text-align: center;
    font-size: 2em;
    display: table;
    width: 100%;
}
body {
    width:100%;
    margin:0;
    display:table;
    border-collapse:collapse;
    table-layout:fixed;
}
#leftSide {
    display:table-cell;
    vertical-align:middle;
    width:2em;
    font-size:4em;
    padding:0;
    overflow:hidden;
    background-image: url('eiffeltower.jpg');
}
#leftSide p {
    display:table;
    text-indent:1.75em;
    white-space:nowrap;
    transform:rotate(-90deg) translate(-50%, 0);
    transform-origin:1em center;
}
#rightSide {
    height: 100%;
    margin:0;
    padding:0;
}
#distance {
    display: table-cell;
    vertical-align: middle;
}
#googleMap {
    height:80%;
    background-color: yellow;
}

如何垂直和水平居中div

2 个答案:

JSFiddle - DEMO或SHOW