Question

我想知道当高度可调时我如何将h2与div的中心对齐。当我在px中有一个高度时，我知道该怎么做。然后我就像这样写

 height: 300px;
 display: flex;
 align-items: center;

但我不知道如何在响应式div图像中做到这一点。

这是我的代码http://www.bootply.com/yr5KNSM17S# 这就是我希望我的文字http://www.bootply.com/HIbKwupnLb

的方式

很抱歉，如果我不清楚。

<div id="mainHeaderWrapper">
   <img src="http://placehold.it/1500x400/cf5">
   <div>
          <h2 class="vit text-center">Testing text</h2>
   </div>
</div>




#mainHeaderWrapper{
    position:relative;
    background: no-repeat url(http://placehold.it/1500x400/cf5) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width:100%;
    height:100%;
}

#mainHeaderWrapper h2{
 align-items: center;
}

h2.vit{
    color: white;
    font: 900 24px/24px "Raleway",Helvetica,Arial,sans-serif !important;
    background: rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 4px #000000;
    padding: 10px 15px;
    z-index: 1; 
    }

Answer 1

可能这会对你有所帮助。您可以在position: absolute标记上添加h2以进行垂直对齐。如下所示。

#mainHeaderWrapper h2{
 align-items: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -22px;
}

当div背景图像响应时，在div中垂直和水平居中文本

1 个答案: