如何垂直對齊jumbotron中心的文字？

我想垂直對齊我的jumbotron中心的文本，但我以前使用的代碼涉及絕對定位和50％從頂部和底部似乎並不適用於此如何垂直對齊jumbotron中心的文字？

這是我的HTML

<div class="jumbotron"> 
    <div class="container"> 
     <h1 class="text-center"><span class="first">UZER</span><span class="last">JAMAL</span></h1> 
     <p class="text-center" id="respon">Responsive web designer</p> 
     <p class="text-center" id="langs">HTML - CSS - BOOTSTRAP - JQUERY</p> 
    </container> 
</div>

和CSS

.jumbotron{ 
height:100vh; 
background:url('./Images/Jumbo.jpg') no-repeat center; 
-webkit-background-size: cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover; 
width:100%; 
position:absolute; 
top:0; 
z-index:-100; 
} 

h1{ 
margin-bottom: -0.7em; 
} 
h1 .first{ 
color:white; 
font-family:secretcode; 
font-size:2em; 
} 

h1 .last{ 
color: #bd902e; 
font-family:aku; 
font-size:1.7em; 
} 

.jumbotron #respon{ 
font-family:geosans; 
color:white; 
font-size:4em; 
margin-bottom:-0.2em; 
} 

.jumbotron #langs{ 
font-family:geosans; 
color:#bd902e; 
font-size:2em; 
}

也就是有辦法把不使用負利潤率的H1和p垂直接近對方嗎？我不認爲使用-0.7em是做

代碼Jsfiddle.net

來源

2016-05-06 Uzer

會更好，如果你創建一個小提琴 – KoKo

這是fiddle.net代碼https://jsfiddle.net/ivinraj/zhuv5ukb/ –

謝謝，我在第一篇文章中添加它 – Uzer

嘗試這個

.jumbotron{ 
    height:100vh; 
    background:url('./Images/Jumbo.jpg') no-repeat center; 
    -webkit-background-size: cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
    width:100%; 
    position:absolute; 
    top:0; 
    z-index:-100; 
    display:flex; 
    display-direction:column; 
    justify-content:center; 
    align-items:center; 
}

來源

2016-05-06 11:55:30

謝謝！這工作 – Uzer

您可以top:50%和transform: translate(-50%, 0) CSS屬性做正確的方式

.jumbotron { 
    height: 100vh; 
    background: url('./Images/Jumbo.jpg') no-repeat center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, 0); 
    z-index: -100; 
}

例如：https://jsfiddle.net/zhuv5ukb/1/

來源

2016-05-06 12:00:14

這就是我以前使用，但由於某種原因，它現在不工作 – Uzer

，原因是什麼？ –

不知道..將該代碼添加到jumbotron css會使整個jumbrotron移動，而不僅僅是文本並將其添加到文本中（通過將所有文本放在div中）不會執行任何操作 – Uzer

line-height:0是你在找我想的。

來源

2016-05-06 12:01:40 Felix

如何垂直對齊jumbotron中心的文字？

回答

相關問題