Reputation: 11
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
Reputation: 491
@user2108340 change the css like this
.album-content {
width:100%;
position: absolute;
bottom: 0;
text-align:center;
}
Upvotes: 0
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
Reputation: 78006
You're missing a quote after your style: <img style="float:right; id="next" src="images/right.gif">
Upvotes: 1