Question

我正面临一个问题。我有，例如像这样的div：

<div class="container-fluid">
    <div class="row restaurant">
        <div class="col-md-6">
            <h2>
                Le restaurant
           </h2>
        </div>
        <div class="col-md-6">
            <p>
                Some text
            </p>
        </div>
    </div>

CSS看起来像这样：

.restaurant{
    height: 68vh;
    background: url("../imgs/restaurant.jpg") no-repeat center center fixed;
    background-size: cover;
}

.restaurant h2{
    font-family: 'brownhill', serif;
    text-align: center;
    font-size: 100px;
    color:white;
    margin-bottom: 50px;
}

.restaurant p{
    font-family: 'minaxi', serif;
    text-align: justify;
    font-size: 18px;
    line-height: 23px;
    color:white;
    width:70%;
    margin:auto;
}

我遇到的问题是我想垂直居中于h2和p部分，并且必须有响应......现在我尝试使用如下解决方案：

margin-top:34%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

但是在手机和平板电脑上它会让人感到害羞......

有任何帮助吗？

提前致谢

Answer 1

你可以像那样使用flexbox

＆＃13;

html {
  margin:0;
}

.restaurant{
    height: 100vh;
    background: url("../imgs/restaurant.jpg") no-repeat center center fixed;
    background-size: cover;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 24em;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.restaurant h2{
    font-family: 'brownhill', serif;
    text-align: center;
    font-size: 100px;
    margin:0;
}

.restaurant p{
    font-family: 'minaxi', serif;
    text-align: justify;
    font-size: 18px;
    line-height: 23px;
    margin:auto;
}

＆＃13;

<div class="container-fluid">
    <div class="row restaurant">
    <div class="headline">
        <div class="col-md-6">
            <h2>
                Le restaurant
           </h2>
        </div>
        <div class="col-md-6">
            <p>
                Some text
            </p>
        </div>
       </div>
    </div>

＆＃13;

垂直居中于div

1 个答案: