Question

大家好有一个简单的问题，在bootstrap 3中玩flexbox并且我似乎无法将我的图像置于屏幕中间，我得到它以使其位于中间但现在它位于顶部屏幕而不是中心：

HTML：

    <div class="parallaxb">
            <div class="homeimgbarber">
            <img class="img-responsive" src="img/cuts.png" style="margin: auto;">
              </div>
  </div>

CSS：

.parallax {
    background-image: url("../img/c.png");
    min-height: 1000px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homeimgbarber {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 1

这是因为.homeimgbarber需要应用高度。

＆＃13;

.parallax {
    background-image: url("http://via.placeholder.com/350x150");
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homeimgbarber {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

＆＃13;

   <div class="parallaxb">
            <div class="homeimgbarber">
            <img class="img-responsive" src="http://via.placeholder.com/350x150">
              </div>
  </div>

＆＃13;

屏幕中间的flexbox中心图像

1 个答案: