如何垂直对齐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中心的文字？

回答

相关问题