我已經解決了大小，表格單元格和東西，但它不工作。我需要對齊div底部的女孩圖像，文本和按鈕都很好。Css - 將圖像對齊到垂直對齊底部不起作用

這裏是我的代碼：

<style type='text/css'> 
.wrapperbannerbanner{ 
    overflow:hidden; 
    color:#FFFFFF; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:15px; 
    font-weight:bold; 
    position: relative; 
    float: left; 
    left: 0px; 
    width: 200px; 
    background-color:#FF9900; 
} 
.toppadding { 
margin-top: 5px; 
margin-left: 2px; 
margin-right: 2px; 
} 
.left2222{ 
    position: relative; 
    /* float: left; */ 
    left: 12px; 
     text-align:left; 
} 
.generalbanner001 { 
background-color: #FFFFFF; 
margin-top: 0.5%; 
/* margin-bottom: 8px; */ 
margin-left: auto; 
margin-right: auto; 
width: 80px; 
height: 35px; 
position: relative; 
float:left; 
-webkit-border-radius: 4px; 
-khtml-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
text-shadow: none; 
} 
.generalbanner001:hover { 
    background: #0a0d0f; 
    text-decoration: none; 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    text-shadow: none; 
} 
.conferir001 { 
padding:8px 0 0 10px; 
} 
.imageleft1222{ 
    float: left; 
    left: 4px; 
    min-width: 90px; 
    height:120px; 
    display:table; 
} 
.imgalign { 
width:90px; 
height:95px; 
vertical-align:bottom; 
display:table-cell; 
} 

</style> 
<div class="wrapperbannerbanner"> 

<div class="toppadding"> 

<div class="imageleft1222"><div class="imgalign" style="background:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png) no-repeat;"></div></div> 

<div class="left2222"> 
     <span>Vai criar um site? Hospede com quem entende do assunto</span> 
     <div class="generalbanner001"><div class="conferir001" style="color:#FF9900;">Conferir</div></div> 
</div> 


</div> 
</div>

小提琴： http://jsfiddle.net/4SmV7/1/

來源

2014-04-01 023023

的癥結在這裏被設置background-position上.imgalign

Demo Fiddle

更改您的CSS .imgalign到：

.imgalign { 
    width:90px; 
    height:95px; 
    vertical-align:bottom; 
    display:table-cell; 
    background-image:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png); 
    background-position:bottom; 
    background-repeat:no-repeat; 
}

並採取聯樣式出來.imgalign：

<div class="wrapperbannerbanner"> 
    <div class="toppadding"> 
     <div class="imageleft1222"> 
      <div class="imgalign"></div> 
     </div> 
     <div class="left2222"> <span>Vai criar um site? Hospede com quem entende do assunto</span> 

      <div class="generalbanner001"> 
       <div class="conferir001" style="color:#FF9900;">Conferir</div> 
      </div> 
     </div> 
    </div> 
</div>

More on background-position from MDN

背景位置CSS屬性設置的初始位置，相對於由背景定義的背景位置層 - 原始爲每個定義的背景圖像。

來源

2014-04-01 15:07:32 SW4

您的解決方案適用於我，但圖片下方有空格，下方沒有空白或填充，因此您知道爲什麼會發生這種情況嗎？ – 023023

剛剛意識到發生了什麼，這是高度。所以背景位置：底部只是將圖像對齊到div的底部，這很好，但我也需要將圖像div本身對齊到其他div的底部。我忘了提及，但高度必須是一個流體。 – 023023

您嘗試對齊底部div與background-image。您需要設置的這個height的div等於他的父母身高和background-image對齊設置爲底部中心

來源

2014-04-01 15:09:50 n1kkou

所以你使用，你需要對齊底部的背景圖片，是否正確？

在這種情況下，我會擺脫階級「imgalign」完全的，並且具有以下CSS在其容器上：

.imageleft1222{ 
    float: left; 
    left: 4px; 
    min-width: 90px; 
    height:120px; 
    display:table; 
    background-image:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png); 
    background-repeat: no-repeat; 
    background-position: bottom; 
}

這是更好，因爲Firefox瀏覽器沒有按」單獨列出背景屬性如果將它們全部分組到「背景」中，請始終正確顯示。

來源

2014-04-01 15:12:34 b4rbika

Css - 將圖像對齊到垂直對齊底部不起作用

回答

Demo Fiddle

相關問題