我不能把我的div同其父母的底部對齊

-2

我有一個div，我不知道如何對齊父母的底部。我不能把我的div同其父母的底部對齊

我嘗試了bottom：0和margin-bottom：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/

有人能幫助我嗎？

來源

2017-07-28 user5014677

你想整個DIV應的頁面，或蒸汽文字的底部應該是DIV的底部。 – user7357089

在要對齊的元素上添加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>

來源

2017-07-28 09:15:10 Akshay

謝謝！祝你有美好的一天伴侶:) – user5014677

@ user5014677歡迎您:) – Akshay

您可以使用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>

來源

2017-07-28 09:16:35 sol

這樣做。

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

來源

2017-07-28 09:17:01 Owais

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

來源

2017-07-28 09:23:56

我不能把我的div同其父母的底部對齊

回答

相關問題