Question

我试图垂直对齐我的jumbotron中心的文字，但我之前使用的代码涉及绝对定位，50％来自顶部和底部似乎不适用于此

这是我的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

Answer 1

试试这个

.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;
 }

Answer 2

您可以使用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/

Answer 3

line-height:0是我想要的。

如何垂直对齐jumbotron中心的文本？

3 个答案: