以響應式方式垂直居中文本

在個人網頁設計項目上取得了進展，但我一直陷在section的垂直居中p標記中。以響應式方式垂直居中文本

我想這個部分裏面的文字垂直居中，但我不希望失去任何響應。我已經嘗試了一些可能的解決方案，但我一直在搞這個。你們有沒有專家看到一個快速解決？

HTML

<div class="box"> 
    <section> 
    <p>Some text</p> 
    </section> 
</div>

CSS

body { 
    background-color: white; 
    margin: 0; 
    overflow: auto; 
} 

.box { 
    display: block; 
    float: left; 
    height: 100vh; 
    width: 100vw; 
    background-color: green; 
    position: relative; 
} 

.box section { 
    display: block; 
    text-align: center; 
    height: 20%; 
    width: 70%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: solid .2em white; 
} 

.box section p { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    position: absolute; 
} 


} 

}

肯定有多餘的CSS在那裏（部分是由於從我拿了這一點的項目文物），但這個問題我有能可見。

來源

2017-02-23 Inkidu616

哪來的問題，它的中心？ – Johannes

我希望文本在節中垂直居中。所以距頂部和底部邊界的距離相等。 – Inkidu616

啊對不起，我想過這個款本身... – Johannes

這裏是中心的事情一個很好的資源 - https://www.w3.org/Style/Examples/007/center.en.html

使用現有的CSS，你可以在p元素上應用top: 50%; transform: translateY(-50%);垂直居中。

body { 
 
    background-color: white; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.box { 
 
    display: block; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
.box section { 
 
    display: block; 
 
    text-align: center; 
 
    height: 20%; 
 
    width: 70%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: solid .2em white; 
 
} 
 

 
.box section p { 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
    margin: 0; 
 
    position: absolute; 
 
}

<div class="box"> 
 
    <section> 
 
    <p>Some text</p> 
 
    </section> 
 
</div>

您還可以使用display: flex; justify-content: center; align-items: center;在p的父水平居中的p和垂直

body { 
 
    background-color: white; 
 
    margin: 0; 
 
    overflow: auto; 
 
} 
 

 
.box { 
 
    display: block; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
.box section { 
 
    display: block; 
 
    text-align: center; 
 
    height: 20%; 
 
    width: 70%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: solid .2em white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.box section p { 
 
    margin: 0; 
 
}

<div class="box"> 
 
    <section> 
 
    <p>Some text</p> 
 
    </section> 
 
</div>

來源

2017-02-23 00:12:29

非常感謝！你不知道我用這件東西擺弄多久才能使它起作用。很多要學習。 – Inkidu616

@ Inkidu616不客氣，很高興它幫助:) –

可以使section一個FLE具有以下設置的Xbox容器（這使得所有的包括p標籤多餘的設置）：

.box section { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 20%; 
    width: 70%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    border: solid .2em white; 
}

完整的解決方案在這裏看到：https://jsfiddle.net/7ag8jqtu/

來源

2017-02-23 00:23:21 Johannes

是的，工作:)感謝您的幫助！ – Inkidu616

以響應式方式垂直居中文本

回答

相關問題