我无法将我的div与其父母的底部联系起来

Question

我有一个div，我不知道如何与其父母的底层联系。

我尝试使用bottom：0和margin-bottom：0但两者都不起作用。我玩位置也是如此，它并没有改变任何东西，只有绝对位置使得div粘在页面的最底部。垂直对齐似乎也不起作用。

这是我的代码的简化版本：

＆＃13;

＆＃13;

.category{
        height: 70px !important;
        width: 28% !important;
        margin: 0 10px 0 10px;
        border: 1px solid #3A94D7;
        border-radius: 15px;
        box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
    }
    .icon-steam{
        background: url(../img/steam.png) 50% 50% no-repeat;
    	background-size: 40px;
        float: left;
        width: 40px;
        height: 40px;
        margin-right: 0.3em;
    }
    .platform{
    	text-shadow: none;
    	color: #65a1bf;
    	text-align: center;
      bottom: 0;
      position: relative;
      margin-bottom: 0;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
			<div class="category icon-steam"><div class="platform">Steam</div></div>
		</div>

＆＃13;

＆＃13;

＆＃13;

如果你愿意，还有一个小提琴链接：https://jsfiddle.net/kk8Lwh6v/

有人能帮助我吗？

Answer 1

在要对齐的元素上添加position:absolute，并在其父级上添加position:relative。

.category {
  height: 70px !important;
  width: 28% !important;
  margin: 0 10px 0 10px;
  border: 1px solid #3A94D7;
  border-radius: 15px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, .75), inset 0 0 2px 0 #4293D5;
  position: relative;
}

.icon-steam {
  background: url(../img/steam.png) 50% 50% no-repeat;
  background-size: 40px;
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 0.3em;
}

.platform {
  width: 100%;
  text-shadow: none;
  color: #65a1bf;
  text-align: center;
  bottom: 0;
  position: absolute;
  margin-bottom: 0;
}

<div class="categories">
  <div class="category icon-steam">
    <div class="platform">Steam</div>
  </div>
</div>

Answer 2

您可以使用flexbox属性：

.category {
  height: 70px !important;
  width: 28% !important;
  margin: 0 10px 0 10px;
  border: 1px solid #3A94D7;
  border-radius: 15px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, .75), inset 0 0 2px 0 #4293D5;
}

.icon-steam {
  background: url(../img/steam.png) 50% 50% no-repeat;
  background-size: 40px;
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 0.3em;
  display: flex;
  justify-content: center;
}

.platform {
  text-shadow: none;
  color: #65a1bf;
  margin-top: auto;
}

<div class="categories">
  <div class="category icon-steam">
    <div class="platform">Steam</div>
  </div>
</div>

Answer 3

这样做。

		<div class="categories">
			<div class="category icon-steam"><div class="platform">Steam</div></div>
		</div>

if('useHoles' in c){
   this.config.useHoles = !!c.useHoles;
}

Answer 4

＆＃13;

＆＃13;

.category{
    height: 70px !important;
    width: 28% !important;
    margin: 0 10px 0 10px;
    border: 1px solid #3A94D7;
    border-radius: 15px;
    box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
    background: url(../img/steam.png) 50% 50% no-repeat;
    background-size: 40px;
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 0.3em;
}
.platform{
    text-shadow: none;
    color: #65a1bf;
    text-align: center;
  top: 60px;
  left:14%;
  position: absolute;
  margin-bottom: 0;
}

＆＃13;

<div class="categories">
        <div class="category icon-steam"><div class="platform">Steam</div></div>
    </div>

＆＃13;

＆＃13;

＆＃13;