Alcon
Alcon

Reputation: 11

Center image at bottom of DIV

I found a lot of related questions, but nothing seems to work like I want. I'd like to center the image with id="bob" on the bottom of my DIV.

My HTML is as following:

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

Using the following CSS styles:

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

I've tried almost everything, but nothing seems to move the IMG with id="bob" to center. Can anyone tell me which part of the CSS is keeping the image to the left?

Upvotes: 1

Views: 1691

Answers (3)

snowp
snowp

Reputation: 491

@user2108340 change the css like this

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

    }

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78006

Your .album-content div is positioned absolutely, so it's not going to adopt the width of its parent container, and therefore it will only be as wide as your image. You need to either set the width or set the left and right properties:

Either:

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

Or:

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

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78006

You're missing a quote after your style: <img style="float:right; id="next" src="images/right.gif">

Upvotes: 1

Related Questions