Question

当“ pic1”中的屏幕变宽时，灰色文本框在右侧，徽标在左侧。

我只想将文本向下移动到框的中央。

但是通过移动文本，我不希望页面的纵向/移动视图上的灰色背景变大，就像截屏“ pic2”上一样

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.logo {
  text-align: center;
  width: 200px;
  height: 300px;
  background-color: rgb(255, 91, 91);
}

.title {
  text-align: center;
  color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.2);
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>

<body>
  <div class="box">
    <div class="logo">This is Logo</div>

    <div class="title">
      <h1>This is H1 Text Box with Gray Background</h1>
      <h3>This is H3 Text Box with Gray Background</h3>
    </div>

  </div>
</body>

</html>

pic1

pic2

Answer 1

听起来您正在寻找以下组合：

display: flex;
justify-content: center;
flex-direction: column;

全部.title。

这将使您的文字垂直居中，并可以在下面看到：

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.logo {
  text-align: center;
  width: 200px;
  height: 300px;
  background-color: rgb(255, 91, 91);
}

.title {
  text-align: center;
  color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
</head>

<body>
  <div class="box">
    <div class="logo">This is Logo</div>

    <div class="title">
      <h1>This is H1 Text Box with Gray Background</h1>
      <h3>This is H3 Text Box with Gray Background</h3>
    </div>

  </div>
</body>

</html>

Answer 2

您可以像这样对移动用户使用@media查询。

@media (max-width < 568) {
 .box {
   display: flex;
   flex-wrap: wrap-reverse;
   justify-content: center;
 }
}

说明：

您要告诉浏览器以反向方式显示其声明方式的框。

因此，您的徽标将在屏幕上向下显示。

玩得开心。

如何向下移动div文本框

2 个答案: