如何將文本與視口單元的div對齊？

當使用像素單位時，我可以對齊文本沒有問題。但對於視口單位，我無法獲得任何地方。這是我的代碼。如何將文本與視口單元的div對齊？

#aboutMeTitle { 
 
    height: 10vh; 
 
    background-color: #BEA69B; 
 
    display: block; 
 
} 
 
#aboutMeTitle p { 
 
    display: inline-block; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.2em; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<div class="row" id="aboutMeTitle"> 
 
    <p>About Me</p> 
 
</div>

來源

2016-09-30 Kyle_Figueroa

'顯示：inline-block的;'的段落可能*不*你想要的。 – Scott

非常簡單的CSS flexbox：

#aboutMeTitle { 
 
    display: flex; 
 
    justify-content: center; /* center p horizontally */ 
 
    align-items: center;  /* center p vertically */ 
 
    height: 10vh; 
 
    background-color: #BEA69B; 
 
} 
 
#aboutMeTitle p { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.2em; 
 
}

<div class="row" id="aboutMeTitle"> 
 
    <p>About Me</p> 
 
</div>

瀏覽器支持：Flexbox將被所有主流瀏覽器，支持except IE < 10。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請使用Autoprefixer。更多詳情，請點擊this answer。

來源

2016-09-30 02:36:16

這也適用。我已經申請了'line-height：10vh'，而且做了這個竅門，但flex box也做了同樣的事情。我只是想知道哪種技術得到更廣泛的支持？ –

您已經在使用視口百分比單位。所以你可以放心地使用flexbox。兩者都是尖端的CSS3技術。就更廣泛的支持而言，這將是flexbox（請參閱caniuse.com）。 –

對於垂直對齊：中間工作的家長必須設置爲顯示：表細胞 HTML

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS

#aboutMeTitle { 
height: 10vh; 
background-color: #BEA69B; 
display:block; 
display:table-cell; 
} 

#aboutMeTitle p { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
text-transform: uppercase; 
letter-spacing: 0.2em; 
vertical-align:middle; 
text-align:center; 
}

來源

2016-09-30 02:27:26

將文本對齊屬性修復爲正常水平居中。但是我無法讓它垂直居中。通常我只是將行高設置爲與div相同的值，但不能將行高設置爲視口單位;或者如果你能我不知道這樣做的伎倆。任何見解？ –

我很抱歉，我說錯了標題。我的主要問題是垂直對齊，而不是文本的水平對齊。 –

您剛剛刪除了display: inline-block中的#aboutMeTitle p，並添加了line-height: 10vh;以使文本居中。

HTML代碼：

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS代碼：

#aboutMeTitle { 
    height: 10vh; 
    background-color: #BEA69B; 
    display: block; 
} 
#aboutMeTitle p { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    vertical-align:middle; 
    line-height: 10vh; 
    text-align:center; 
}

JSFIDDLE DEMO

來源

2016-09-30 02:36:17 Eightleven

我感到很愚蠢的，我對於這件煩心事的人道歉。希望這個答案可以幫助其他人。我在4個小時的睡眠中工作了兩倍，現在我正在開展一個個人項目。無論如何，你可以對視口單元應用行高屬性，我只需要硬編碼它，因爲它不是DW CSS面板中的選項。

這裏是固定的CSS

#aboutMeTitle { 
    height: 10vh; 
    background-color: #BEA69B; 
    display: block; 
} 
#aboutMeTitle p { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular"; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    vertical-align: middle; 
    text-align: center; 
    line-height: 10vh; 
}

來源

2016-09-30 02:38:24

如何將文本與視口單元的div對齊？

回答

相關問題