gpt4 book ai didi

html - 如何向下移动div文本框

转载 作者:行者123 更新时间:2023-11-28 00:43:06 24 4
gpt4 key购买 nike

当“pic1”中的屏幕较宽时,右侧为灰色文本框,左侧为 Logo 。

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

但是通过移动文本我不希望灰色背景在页面的纵向/移动 View 上变大,就像在屏幕截图“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>

图1 pic1

图2 pic2

最佳答案

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

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>

关于html - 如何向下移动div文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53697585/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com