文章/答案/技术大牛

发布

社区首页 >问答首页 >将文本与Flexbox中的图像对齐

问将文本与Flexbox中的图像对齐
EN

Stack Overflow用户

提问于 2019-01-04 01:49:42

回答 2查看 90关注 0票数 1

我有一个图像和一些文字下面它对齐在一个2x2网格使用柔性盒。我使用了一个display: flex;网络来获取图像和所有所需的网格来排列。但是，我对出现在图片下面的文本有一个问题。我希望这个图像在柔性盒中显示为中心，并使用align-items: center成功地实现了这一目标。但是，我希望图片下面的文本向左对齐，而不是像其他的flex儿童那样对齐中间。这有可能是我目前设置的方式吗？

我试图将文本从中间对齐的柔性盒div中提取出来，但是它解释了父柔盒中的文本，破坏了我创建的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>

html

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-04 02:04:55

对您希望对齐的项使用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>

票数 0

Stack Overflow用户

发布于 2019-01-04 05:26:13

添加对齐-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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54032185

复制

相似问题

问将文本与Flexbox中的图像对齐
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本与Flexbox中的图像对齐EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本与Flexbox中的图像对齐
EN