首页 文章

如何将div文本框向下移动

提问于
浏览 次
0

当“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

html css

2 回答

  • 0

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

    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>
    回复于
  • 0

    您可以使用 @media 查询移动用户，就像这样 .

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

    Explanation ：

    你告诉浏览器以反向方式显示方框，告诉你如何声明它 .

    所以这样你的标志就会在屏幕上显示出来 .

    玩得开心 .

    回复于

相关问题