Question

正如我在标题中所说，我试图将文本放在div上 - 纵向和横向，但没有成功。请检查我的代码并帮助我查看问题所在。

HTML代码：

<div id="wrapper">
        <div id="top">
            <div class="container-fluid text-center">
                <div id="top-rectangle" class="mid">
                        <p>
                        Hello, text and text.
                        </p>
                        <p>
                        More text
                        </p>
                </div>
            </div>
        </div>

CSS代码：

body {
        height: 100%;
        margin: 0;
}
#wrapper {
        display: table;
        width: 100%;
}
#top {
        height: 0;
        display: table-row;
        vertical-align: middle;
}
#top-rectangle {
        height: 450px;
        background-image:  url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
        background-size: cover;
        color: white;
}
.midSection {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
}

的jsfiddle： https://jsfiddle.net/krgtdomh/

注意：请知道我搜索了一个答案而且我看到了一些答案，但我仍然不明白我的代码是否错误，文本并不是中心。

Answer 1

请检查：https://jsfiddle.net/krgtdomh/1/

我已添加：

.outer {
    display: table;
    position: absolute;
    height: 450px;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

我已将display:block;添加到#top-rectangle并将高度更改为450px。

我用this回答来到那里

Answer 2

看起来你的CSS代码很好，但是有一个错误：

在CSS中使用：midSection 在html中：class="mid"

正如你可以看到这种方式名称不同而且没有使用css，这是一个修复：

https://jsfiddle.net/krgtdomh/2/

我还为你的div添加了一个宽度：

#top-rectangle {
        height: 450px;
        width: 450px;
        background-image:  url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
        background-size: cover;
        color: white;
}

Answer 3

对于div .midSection的中心垂直和水平

CSS

.midSection{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

我试图将文本垂直和水平地放在div上

3 个答案: