私のdivを親の一番下にアライメントすることはできません

Question

私はその親の一番下にどのようにアライメントするのかわからないdivを持っています。

私はボトム：0とマージンボトム：0で試しましたが、どちらも動作しません。私はポジションでもプレーしたが、絶対的なポジションだけがdivをページの最下部に固執させるだけで何も変わらない。垂直方向の整列もうまく機能していないようです。ここで

は、私のコードの簡易版です。

.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; 
 
    \t background-size: 40px; 
 
     float: left; 
 
     width: 40px; 
 
     height: 40px; 
 
     margin-right: 0.3em; 
 
    } 
 
    .platform{ 
 
    \t text-shadow: none; 
 
    \t color: #65a1bf; 
 
    \t text-align: center; 
 
     bottom: 0; 
 
     position: relative; 
 
     margin-bottom: 0; 
 
    }

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

そして、あなたがしたい場合フィドルのリンクがあります：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

。

.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; 
 
\t background-size: 40px; 
 
    float: left; 
 
    width: 40px; 
 
    height: 40px; 
 
    margin-right: 0.3em; 
 
} 
 
.platform{ 
 
\t text-shadow: none; 
 
\t color: #65a1bf; 
 
\t left:14%; 
 
    top:60px; 
 
    position: absolute; 
 
}

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

Answer 4

.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; 
 
}

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