如何向下移动div文本框
[英]How to move div text box down
问题描述
当“ 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>
图片1
图片2
2 个解决方案
解决方案1
0 已采纳 2018-12-09 23:10:05
听起来您正在寻找以下各项的组合：
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>
解决方案2
0 2018-12-09 23:14:56
您可以像这样针对移动用户使用@media查询。
@media (max-width < 568) {
.box {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
}
}
说明 ：
您要告诉浏览器以反向方式显示框，说明其声明方式。
因此您的徽标将以这种方式显示在屏幕上。
玩得开心。
如何向下移动模式框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.