无法将 header 置于我的 flex 项目上方并在 flex 容器内居中

Question

我在 flex 容器内的两个轴的中心对齐了三个 flex 项目。我的问题是本节的 header 也与他们保持一致。相反，它应该以它们为中心。我还在学习中。

代码段：

.big-location-container {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.location-container {
  width: 300px;
  height: 50%;
  margin: 15px 40px;
  background-color: black;
  opacity: 1;
}

<div class="big-location-container">

  <h2>Locations</h2>

  <div class="location-container">
    <h3>Downtown</h3>
    <p>384 West 4th St</p>
    <p>Suite 108</p>
    <p>Portland, Maine</p>
  </div>

  <div class="location-container">
    <h3>East Bayside</h3>
    <p>3433 Phisherman's Avenue</p>
    <p>(Northwest Corner)</p>
    <p>Portland, Maine</p>
  </div>

  <div class="location-container">
    <h3>Oakdale</h3>
    <p>515 Crescent Avenue</p>
    <p>Second Floor</p>
    <p>Portland, Maine</p>
  </div>
</div>

Answer 1

你可以这样做

.big-location-container {
    height: 500px;
    width: 1200px;
    margin: 0 auto;
    background-color: white;
}
.big-location-container h2 {
    text-align: center;
}
.main-location-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.location-container {
    width: 300px;
    height: 50%;
    margin: 15px 40px;
    background-color: black;
    color: white;
    opacity: 1;
}

<div class="big-location-container">         
    <h2>Locations</h2>
    <div class="main-location-container">
        <div class="location-container">
            <h3>Downtown</h3>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
        </div>

        <div class="location-container">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
        </div>

        <div class="location-container">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
        </div>
    </div>
</div>

Answer 2

我将 big-location-container 更改为 flex-direction: column; 并包装了 location-container 并制作了 flex-direction: row;。
我还从 location-container 中删除了 height。

.locations-wrapper {
    display: flex;
}

.big-location-container {
    height: 500px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.location-container {
    width: 300px;
    margin: 15px 40px;
    background-color: black;
    opacity: 1;
    color: white;
}

<div class="big-location-container">
        
        <h2>Locations</h2>

        <div class="locations-wrapper">
            <div class="location-container">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>

            <div class="location-container">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>

            <div class="location-container">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>

    </div>

无法将 header 置于我的 flex 项目上方并在 flex 容器内居中

Can't get the header above my flex items and centered inside the flex container

html

css

frontend

flexbox