Flex項目中的底部對齊文本

Question

我正在一個網站上工作，我們有一排按鈕 - 它們是一個圖像，然后是一個h3，然后是一個按鈕，它們全部堆疊在一起。

這些都是使用flexbox和flex-direction: column和一系列margin-top: auto規則顯示的。

h3有時會分成兩行。 當發生這種情況時，按鈕文本與h3標簽的中心對齊：有點像連字符和彼此相鄰的等號。

- = =而不是- - -

客戶希望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; } 

 <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> 

編輯：不幸的是，codepen似乎已經解釋了我粘貼到它的HTML不同於Wordpress所做的...所以我讓每個人都工作的codepen產生了我無法在我的實時網站上使用的解決方案。 哦 - 好吧 - 無論如何我最終在現場網站上搞清楚了。 很抱歉沒有提前注意到。

Answer 1

您將“按鈕”設置為列方向Flex容器：

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

但是容器的第一個子項（flex項）設置為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;
}

修改后的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>