使用flex box时，我在对齐多个div项时遇到问题.主要用于div id=‘flow’.我希望内容标题和内容本身垂直对齐，同时以行/下方的形式显示它应该是这样的.try 使用对齐资源中心，甚至try 以多种方式对其进行包装，但由于它们是单独的实体，因此它们确实只在水平方向上垂直对齐
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Pacific Trails Resort :: Activities </title>
<link rel="stylesheet" href="pacific.css">
<style type="text/css">
#wrapper {
display: grid;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
}
body {
background-color: #90c7e3;
background: linear-gradient(white ,#90c7e3);
background-repeat: no-repeat;
}
header {
background-color: #002171;
color: #FFFFFF;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
text-align: center;
}
header ul {
margin: 0;
padding: 0;
}
h1 {
padding-top: .5em;
padding-bottom: .5em;
margin: 0;
}
h2 {
color: #1976D2;
text-shadow: 1px 1px #CCCCCC;
}
h3{
color: #00003;
}
nav {
background-color: #ffffff;
font-weight: bold;
padding: 0;
padding-left: 0;
text-align: center;
margin: 0;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav li{
list-style: none;
border-bottom: 1px solid #00008b;
}
nav a {
list-style-type: none;
text-decoration: none;
padding: 8px;
color: #002171;
}
ul{
list-style-image: url(marker.gif);
}
dt{
color: #002171;
}
main{
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
}
.contact{
font-size: 90%;
}
footer{
font-size: 75%;
font-style:italic;
padding: 2em;
text-align: center;
}
#homehero{
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.Resort{
color: #1976D2;
font-weight:bold;
}
@media (min-width: 600px){
nav ul{
flex-direction: row;
flex:none;
justify-content: space-around;
border: none;
}
nav li{
border-bottom: none;
display: inline;
text-align: center;
}
nav a {
margin-right: 2em;
margin-left; 2em;
text-decoration: none;
padding: 10px;
}
#flow{
display: flex;
flex-direction: row;
flex: 1;
justify: center;
align-items: center;
}
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="yurts.html">Yurts</a>
<a href="activities.html">Activities</a>
<a href="index.html">Reservations</a>
</nav>
<div id="trailhero">
</div>
<main>
<h2>Activities at Pacific Trails</h2>
<div id="flow">
<h3>Hiking</h3>
<p>Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go alone or join one of our guided hikes </p>
<h3>Kayaking</h3>
<p>Ocean kayaks are available for guest use</p>
<h3>Bird Watching</h3>
<p>While anytime is a good time for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise several times a week.</p>
</div>
</main>
<footer>
<small>
<i>Copy right © 2022 Pacific Trails Resort</i><br />
<a href="mailto:davilaco@asu.edu"> davilaco@asu.edu</a>
</small>
</footer>
</div>
</body>
</html>
谢谢