弹性项目中的底部对齐文本

Question

我在一个网站上工作，那里有成排的按钮-它们是图像，然后是h3，然后是按钮，它们都堆叠在一起。

这些都使用flexbox和AXUIElementRef focusedElement = NULL; AXUIElementRef systemWideElement = AXUIElementCreateSystemWide(); AXValueRef role = NULL; AXError focusError = AXUIElementCopyAttributeValue(systemWideElement, kAXFocusedUIElementAttribute, (CFTypeRef *)&focusedElement); AXError roleError = AXUIElementCopyAttributeValue(focusedElement, kAXRoleAttribute, (CFTypeRef *)&role); 以及一系列flex-direction: column规则显示。

h3有时会分成两行。发生这种情况时，按钮文本将与h3标签的中心对齐：有点像连字符和等号，彼此相邻。

margin-top: auto而不是- = =

客户希望将h3文本的底行对齐。我不知道该怎么做...有人可以帮忙吗？

https://codepen.io/anon/pen/zLVMPo

- - -

div.row {
  width: 100%;
  float: left;
  background-repeat: no-repeat !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.service-square-row .span4,
.service-square-row .span3,
.service-square-row .span6 {
  display: flex;
  flex-direction: column;
}

.service-square-row .wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.services.service-square-row .span4 {
  width: 260px;
  border-radius: 3px;
  margin: 10px;
  position: relative;
  background: #013ca6;
  max-width: 260px;
  height: 300px;
}

.service-square p:first-child {
  margin-top: 15px;
  height: 126px;
}

.service-square-row .flex-link .span4 img,
.service-square-row .flex-link .span3 img {
  max-height: 126px;
}

img {
  vertical-align: middle;
}

img,
video {
  height: auto;
  max-width: 100%;
}

.service-square-row .flex-link img,
.service-square-row .flex-link img {
  height: 126px;
  width: 126px
}

.service-square-row h3 {
  margin-top: auto;
  font-size: 20px;
  width: 95%;
  padding: 0;
  margin-left: 2.5%;
  margin-right: 2.5%;
  color: white;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 25px;
}

.service-square-row .service-square p:last-child {
  margin-top: auto;
  margin-bottom: 30px;
  text-align: center;
}

a.btn-bt.default,
a.btn-bt.alternate {
  font-weight: 400;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  padding: 10px 50px;
}

a.btn-bt.alternate {
  color: #ffffff;
  font-size: 14px;
  background: #e31d1a;
  letter-spacing: px;
}

编辑：不幸的是，Codepen似乎对我粘贴到其中的HTML的理解与Wordpress所做的不同...因此，我让每个人都工作的Codepen产生了我无法在现场使用的解决方案。哦，对了-我还是还是在现场上弄清楚了。对不起，您没有注意到。

Answer 1

您已将“按钮”设置为列方向的伸缩容器：

.service-square-row .span4  {
    display: flex;
    flex-direction: column;
}

但是容器的第一个子项（弹性项目）设置为flex-grow: 0，这是默认设置。因此h3文字的运动范围有限。

尝试以下方法：

.span4 > .flex-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
}

.service-square-row .service-square p:last-child {
    /* margin-top: auto; */
    margin-bottom: 30px;
    text-align: center;
}

revised codepen

div.row {
  width: 100%;
  float: left;
  background-repeat: no-repeat !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.service-square-row .span4,
.service-square-row .span3,
.service-square-row .span6 {
  display: flex;
  flex-direction: column;
}

.service-square-row .wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.services.service-square-row .span4 {
  width: 260px;
  border-radius: 3px;
  margin: 10px;
  position: relative;
  background: #013ca6;
  max-width: 260px;
  height: 300px;
}

.service-square p:first-child {
  margin-top: 15px;
  height: 126px;
}

.service-square-row .flex-link .span4 img,
.service-square-row .flex-link .span3 img {
  max-height: 126px;
}

img {
  vertical-align: middle;
}

img,
video {
  height: auto;
  max-width: 100%;
}

.service-square-row .flex-link img,
.service-square-row .flex-link img {
  height: 126px;
  width: 126px
}

.service-square-row h3 {
  margin-top: auto;
  font-size: 20px;
  width: 95%;
  padding: 0;
  margin-left: 2.5%;
  margin-right: 2.5%;
  color: white;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 25px;
}

.service-square-row .service-square p:last-child {
  /* margin-top: auto; */
  margin-bottom: 30px;
  text-align: center;
}

a.btn-bt.default,
a.btn-bt.alternate {
  font-weight: 400;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  padding: 10px 50px;
}

a.btn-bt.alternate {
  color: #ffffff;
  font-size: 14px;
  background: #e31d1a;
  letter-spacing: px;
}

.span4>.flex-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
  /* demo only; illustrates full range of element */
}

<div class="row three-thirds services service-square-row  default-padding light-header light-content" style="">

  <div class="wrapper">
    <a class="flex-link" href="/electronics-restoration/">
      <div class="span4 service-square sq-1 service-1" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-484" src="https://via.placeholder.com/120x120" alt="" width="120" height="120"></p>

        <h3 style="text-align: center;">Electronics</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/electronics-restoration/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="/art-and-document-recovery/">
      <div class="span4 service-square sq-2 service-2" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-485" src="https://via.placeholder.com/120x120" alt="" width="106" height="139"></p>

        <h3 style="text-align: center;">Art &amp; Document Recovery</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/art-and-document-recovery/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="#">
      <div class="span4 service-square sq-3 service-3" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-486" src="https://via.placeholder.com/120x120" alt="" width="140" height="143"></p>

        <h3 style="text-align: center;">Wind, Hurricane, &amp; Tornado</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="#">Learn More</a></p>
      </div>
    </a>
  </div>
</div>

Answer 2

如果您想使某个东西与容器的底部中心对齐，我通常采用的方法是将父级设置为display: flex;，子级设置为align-self: flex-end;

如果您要保持HTML的相同结构，最好的方法是将链接容器的高度设置为父容器的百分比，将<h3>对准其容器的底部，并居中。

.service-square .flex-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 80%;
}

.service-square h3 {
  align-self: flex-end;
  margin-bottom: 0;
}

希望我能正确理解您的问题，如果您有任何疑问或我误解了最初的要求，请告诉我。

div.row {
  width: 100%;
  float: left;
  background-repeat: no-repeat !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

.service-square-row .span4,
.service-square-row .span3,
.service-square-row .span6 {
  display: flex;
  flex-direction: column;
}

.service-square-row .wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.services.service-square-row .span4 {
  width: 260px;
  border-radius: 3px;
  margin: 10px;
  position: relative;
  background: #013ca6;
  max-width: 260px;
  height: 300px;
}

.service-square p:first-child {
  margin-top: 15px;
  height: 126px;
}

.service-square-row .flex-link .span4 img,
.service-square-row .flex-link .span3 img {
  max-height: 126px;
}

img {
  vertical-align: middle;
}

img,
video {
  height: auto;
  max-width: 100%;
}

.service-square-row .flex-link img,
.service-square-row .flex-link img {
  height: 126px;
  width: 126px
}

.service-square-row h3 {
  margin-top: auto;
  font-size: 20px;
  width: 95%;
  padding: 0;
  margin-left: 2.5%;
  margin-right: 2.5%;
  color: white;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 25px;
}

.service-square-row .service-square p:last-child {
  margin-top: auto;
  margin-bottom: 30px;
  text-align: center;
}

a.btn-bt.default,
a.btn-bt.alternate {
  font-weight: 400;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  padding: 10px 50px;
}

a.btn-bt.alternate {
  color: #ffffff;
  font-size: 14px;
  background: #e31d1a;
  letter-spacing: px;
}

/* ===== New content ===== */

.service-square .flex-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 80%;
}

.service-square h3 {
  align-self: flex-end;
  margin-bottom: 0;
}

<div class="row three-thirds services service-square-row  default-padding light-header light-content" style="">

  <div class="wrapper">
    <a class="flex-link" href="/electronics-restoration/">
      <div class="span4 service-square sq-1 service-1" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-484" src="https://via.placeholder.com/120x120" alt="" width="120" height="120"></p>

        <h3 style="text-align: center;">Electronics</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/electronics-restoration/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="/art-and-document-recovery/">
      <div class="span4 service-square sq-2 service-2" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-485" src="https://via.placeholder.com/120x120" alt="" width="106" height="139"></p>

        <h3 style="text-align: center;">Art &amp; Document Recovery</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="/art-and-document-recovery/">Learn More</a></p>
      </div>
    </a>
    <a class="flex-link" href="#">
      <div class="span4 service-square sq-3 service-3" style="border-style:;">
        <p style="text-align: center;"><img class="alignnone size-full wp-image-486" src="https://via.placeholder.com/120x120" alt="" width="140" height="143"></p>

        <h3 style="text-align: center;">Wind, Hurricane, &amp; Tornado</h3>
        <p style="text-align: center;"><a class="btn-bt alternate" href="#">Learn More</a></p>
      </div>
    </a>
  </div>
</div>