DIV底部的中心圖像

我發現了很多相關的問題，但似乎沒有像我想要的那樣工作。我想在圖片的底部添加id =「bob」。DIV底部的中心圖像

我的HTML是如下：

<table id="newsTable" width="100%" border="1"> 
    <thead> 
    <tr> 
     <th> 
     <div onClick="openClose('2006')" style="cursor:hand; cursor:pointer"> 
       Title 
       <img id="20062" src="images/play.png" style="float:right;"> 
     </div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
      <div id="2006" class="texter"> 
      <h2>Subtitle</h2> 
       <img src="images/image.jpg" style="float:right;"> 
       <p> 
       Some text 
       </p> 
       <div class="album"> 
       <div class="album-content"> 
        <img id="bob" src="images/picture.jpg"> 
       </div> 
       </div> 
       <img style="float:left;" id="prev" src="images/left.gif"> 
       <img style="float:right;" id="next" src="images/right.gif"> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table>

使用下面的CSS樣式：

#newsTable { 
    border: 1px solid #e3e3e3; 
    width: 100%; 
    border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
} 

#newsTable td, #newsTable th { 
    padding: 5px; 
    color: #333; 
} 

#newsTable td { 
    line-height: 20px; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    border: 0px solid; 
    font-weight: bold; 
} 

#newsTable thead { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-size:18px; 
    padding: .2em 0 .2em .5em; 
    text-align: left; 
    color: #4B4B4B; 
    background: transparant; 
    border-bottom: solid 1px #999; 
} 

#newsTable th { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    background-image:url(images/background_thead.jpg); 
    background-repeat: no-repeat; 
    font-size: 18px; 
    line-height: 25px; 
    font-style: normal; 
    font-weight: normal; 
    text-align: left; 
    text-shadow: white 1px 1px 1px; 
} 

.texter { 
    display:none 
} 

@media print { 
    .texter { 
     display:block; 
    } 
} 

.album { 
    height: 600px; 
    position: relative; 
} 

.album-content { 
    position: absolute; 
    bottom: 0; 
    float: none; 
    text-align:center; 
}

我已經試過幾乎所有的東西，但似乎沒有任何使用id = 「鮑勃」移動IMG居中。任何人都可以告訴我哪些CSS部分將圖像保留在左邊？

來源

2013-02-25 Alcon

我更新我的回答，請檢查 – snowp 2013-02-25 19:42:03

你自己的風格後失蹤報價：<img style="float:right; id="next" src="images/right.gif">

來源

2013-02-25 18:45:12 AlienWebguy

+1尼斯發現.... – Adrift 2013-02-25 18:55:23

謝謝！但它並沒有解決我的問題，實際上，在我'清理'我的代碼在這裏發佈後，報價缺失。（刪除一個onClick事件，使其更易讀） – Alcon 2013-02-25 19:15:26

好吧，看看我的其他答案。 – AlienWebguy 2013-02-25 19:38:09

@ user2108340改變這樣

.album-content { 
    width:100%; 
    position: absolute; 
    bottom: 0; 
    text-align:center; 

    }

來源

2013-02-25 18:46:22 snowp

邊距不能用於絕對定位。 – AlienWebguy 2013-02-25 18:49:35

@AlienWebguy它的工作現在我檢查了我的html頁面 – snowp 2013-02-25 19:44:48

你.album-content DIV的CSS絕對定位，所以它不會採取的寬度其父容器，因此它只會和你的圖像一樣寬。您需要可以設置width或設置left和right屬性：

要麼：

.album-content { 
    position : absolute; 
    bottom  : 0; 
    left  : 0; 
    right  : 0; 
    text-align : center; 
}

或者：

.album-content { 
    position : absolute; 
    bottom  : 0; 
    width  : 100%; 
    text-align : center; 
}

來源

2013-02-25 19:37:44 AlienWebguy

謝謝！從來沒有這樣想過，但我明白！ – Alcon 2013-02-25 19:46:12

DIV底部的中心圖像

回答

相關問題