Question

我正在尝试在页面中间创建一个带徽标的加载屏幕。我已经找到了JS部分但是对于我的生活，我无法将文本置于图像的顶部和底部。这是JSFiddle，这是代码，我做错了什么。我尝试过寻找答案，但我尝试过的所有结果都没有让我的div以徽标顶部和徽标底部的文字为中心。

＆＃13;

<-- $(window).load(function() {
  "use strict";
  $(".loader").fadeOut(3000).delay(3000);
}); -->

＆＃13;

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
}

.loader img {
  width: 20%;
  height: auto;
}

.centered-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader centered-loader">
  <p>Loading...</p>
  <img class="img-responsive pulsate" src="http://lorempixel.com/400/400/cats/" alt="Logo" />
  <p>This text needs to be below the logo.</p>
</div>

＆＃13;

Answer 1

默认flex direction为row，这意味着项目将水平放置。要垂直定位，请使用flex-direction: column：

＆＃13;

<-- $(window).load(function() {
  "use strict";
  $(".loader").fadeOut(3000).delay(3000);
}); -->

＆＃13;

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
}

.loader img {
  width: 20%;
  height: auto;
}

.centered-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader centered-loader">
  <p>Loading...</p>
  <img class="img-responsive pulsate" src="http://lorempixel.com/400/400/cats/" alt="Logo" />
  <p>This text needs to be below the logo.</p>
</div>

＆＃13;

Answer 2

如果您需要将布局保留为flex-direction: row，请在容器上使用flex-wrap: wrap并为文本元素指定全宽：

＆＃13;

<!-- $(window).load(function () {
"use strict";
$(".loader").fadeOut(3000).delay(3000);
}); -->

＆＃13;

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
}

.loader img {
  width: 20%;
  height: auto;
}

.centered-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

p {
  flex: 0 0 100%;
  text-align: center;
}

＆＃13;

<div class="loader centered-loader">
  <p>Loading...</p>
  <img class="img-responsive pulsate" src="http://lorempixel.com/400/400/cats/" alt="Logo" />
  <p>This text needs to be below the logo.</p>
</div>

＆＃13;

Answer 3

您可以使用text-align：center并删除display：flex。

<-- $(window).load(function() {
  "use strict";
  $(".loader").fadeOut(3000).delay(3000);
}); -->

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
}

.loader img {
  width: 20%;
  height: auto;
}

.centered-loader {
  text-align:center;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader centered-loader">
  <p>Loading...</p>
  <img class="img-responsive pulsate" src="http://lorempixel.com/400/400/cats/" alt="Logo" />
  <p>This text needs to be below the logo.</p>
</div>

将所有内容置于div的中间，文本位于图像的顶部和底部

3 个答案: