在Flexbox中将文本与图像对齐

时间：2019-01-04 01:49:43

标签： html css css3 flexbox

我有一张图片，下面有一些文字，使用flexbox在2x2网格中对齐。香港专业教育学院使用display: flex;的网获取图像和所需的所有网格以对齐。但是，图像下方出现的文字有问题。我希望图像显示在Flexbox的中央，并使用align-items: center成功实现了这一目标。但是，我希望图像下方的文本像其余的flex子项一样向左对齐而不是居中对齐。这可能是我目前设置的方式吗？

我尝试将文本从居中对齐的flexbox div中取出，但随后它考虑了父flexbox中的文本并破坏了我创建的2x2图像网格。

这是我当前拥有的代码（请注意，该代码段压缩了所有内容，因此请查看CodePen以了解当前的实际状态），以及以下是CodePen：https://codepen.io/anon/pen/vvdaYZ 

.header-row {
  background-color: #003F7C;
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
}
<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

2 个答案:

答案 0 :(得分：0)

在要向左对齐的项目上使用align-self: start：

.header-row {
  background-color: #003F7C;
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
}
.person-div h2, .person-div h4  {
  align-self: start;
}
<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

如果您希望文本与图像对齐，请使用align-items: start将它们包装在其他包装器中：

.header-row {
  background-color: #003F7C;
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  padding: 0 10px;
  align-items: center;
}
.person-div div {
  display: flex;
  flex-direction: column;
  align-items: start;
}
<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
    <div class="person-div">
      <div>
        <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
        <h2 class="white-text">Field Name </h2>
        <h4>Field Position </h4>
      </div>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

答案 1 :(得分：0)

添加align-self：从h2和h4标签开始。

.header-row {
  background-color: #003F7C;
}

.person-div h2,
.person-div h4{
align-self:start
}

.full-width-eight-normal {
  width: calc(66.6666666667%);
  float: left;
  margin-left: 0;
}

.full-width-four-normal {
  width: calc(33.3333333333%);
  float: left;
  margin-left: 0;
}

.meet-outer-div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.main-row {
  background-color: #003F7C;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.person-div {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
}
<div class="meet-outer-div">
  <div class="full-width-eight-normal main-row">
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
    <div class="person-div">
      <img class="img-resize" src="https://placeimg.com/350/350/animals?random=12">
      <h2 class="white-text">Field Name </h2>
      <h4>Field Position </h4>
    </div>
  </div>
  <div class="full-width-four-normal numbers-div">
    <ul class="ul-no-bullets">
      <li class="margin-spacing">
        <p id="section-title">This</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">is Just</p>
      </li>
      <li class="margin-spacing">
        <p id="section-title">Right Side</p>
        <li>
          <p id="section-title">Filler</p>
        </li>
    </ul>
  </div>
</div>

相关问题
最新问题