时间戳

首页 > 解决方案 > 对齐 div 中的内容：绝对到底部和相对于中心

html - 对齐 div 中的内容：绝对到底部和相对于中心

问题描述

我一直在尝试将 div 中的内容与底部对齐（这似乎只适用于绝对），同时将内容定位在中心。

在我下面的代码中，问题是指图像，它们要么居中并位于顶部，要么位于左侧和底部，但绝不会两者兼而有之。

我尝试了不同的 CSS 方法，以及只使用老式表格围绕图像，但似乎没有什么可以同时获得两者。

如何定位图像的中心和底部？

jsfiddle

.x-offer:nth-of-type(1) { 
background-color: #c5d7d9; 
}

.x-offer:nth-of-type(2) { 
background-color: #e6e0cf; 
}
.x-offer:nth-of-type(3) { 
background-color: #debfb5; 
}
.x-offer { 
padding: 20px 0 0 0 !important;

}
.x-offer.nails > .flex-column {
width: 90%;
}
.x-offer > .flex-column {
width: 100%;

}
.x-offer > .flex-column > div:nth-of-type(2) {
bottom: 0px;  
width: 75%;
margin: 0px auto;
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<div class="container">
  <div class="row" style="height: 250px;">
  
    <!-- STYLING -->
    <div class="col-sm text-center d-flex align-items-top justify-content-center x-offer styling">
      <div class="flex-column justify-content-center" style="border: 1px solid green;">
      <div style="border: 1px solid;">
      STYLING<p>&nbsp;</p> 
      </div>
      <div style="border: 1px solid;">
      <img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service1.gif" style="max-height: 50%; max-width: 100%">
    </div>
      </div>
      </div>

    <!-- HAIR -->
    <div class="col-sm text-center d-flex align-items-top justify-content-center x-offer hair">
      <div class="flex-column" style="border: 1px solid green;">
      <div style="border: 1px solid;">
      HAIR<p>&nbsp;</p> 
      </div>
      <div style="border: 1px solid;">
      <img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service3.gif" style="max-height: 50%; max-width: 100%">
    </div>
      </div>
      </div>


    <!-- NAILS -->
    <div class="col-sm text-center d-flex align-items-top justify-content-center x-offer nails ">
      <div class="flex-column" style="border: 1px solid green;">
      <div style="border: 1px solid;">
      NAILS<p>&nbsp;</p> 
      </div>
      
  
      <div style="border: 1px solid;">    
      <img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service2.gif" style="max-height: 50%; max-width: 100%">
   
      
    </div>
      </div>
      </div>
      
  </div>  </div>

标签： htmlcssbootstrap-4

解决方案

修改你的风格.x-offer > .flex-column > div:nth-of-type(2)

添加left和right参数，并将它们设置为0：

.x-offer > .flex-column > div:nth-of-type(2) {
    bottom: 0px;  
    width: 75%;
    margin: 0px auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

这是小提琴

推荐阅读