...

View Full Version : aligning an image vertically



jarv
10-22-2009, 01:49 PM
In my code below, I would like to vertically align the image.gif to the logo holder class

I tried this:

bottom:0;
margin:auto;
position:absolute;
top:0;


but that didn't work?!

my code


<div class="item">
<div class="logoholder">
<a href="#" class="logo"><img src="/images/image.gif" width="131" height="78"/></a>
</div>
<div class="details">
<div class="name">company name</div>
<img src="/layoutimages/money.gif" alt="money" width="22" height="22"/>
<div class="amount">4000</div>
<div class="bonus">100% Up To 4000 Bonus</div>
<div class="usa">Not Accepts USA Players</div>
</div>
<a href="#" class="sprite visit">visit us now</a>
<div class="company">this is a Powered Site</div>
</div>


CSS


.top10 {
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 10px;
position: relative;
}
.top10 .corner {
bottom: 0px;
*bottom: 3px;
right: 0px;
position: absolute;
}
.top10 h2 {
padding-left: 20px;
color: white;
line-height: 21px;
padding-top: 6px;
padding-bottom: 4px;
background-position: left -181px;
}
.top10 .item {
line-height: 1.4em;
position: relative;
border-bottom-color: #bfbfbf;
border-bottom-width: 1px;
border-bottom-style: dotted;
height: 95px;
border-right-color: #e9e8e4;
border-left-color: #e9e8e4;
border-right-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-left-width: 1px;
}
.top10 .logoholder {
left: 10px;
top: 7px;
position: absolute;
width:133px;
height:80px;
text-align: center;
top:0px;
bottom:0px;
margin:auto;

}
.top10 .logo {

}
.top10 .logo img {
border-color: #e9e8e4;
border-width: 1px;
border-style: solid;

}
.top10 .details {
width: 270px;
left: 170px;
top: 6px;
position: absolute;
}
.top10 .details img {
padding-bottom: 5px;
padding-right: 5px;
padding-top: 5px;
float: left;
}
.top10 .details .name {
margin-bottom: 3px;
padding-bottom: 2px;
border-bottom-color: #bfbfbf;
border-bottom-width: 1px;
border-bottom-style: solid;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.top10 .details .amount {
padding-bottom: 3px;
color: #d7a542;
font-weight: bold;
font-size: 15px;
}
.top10 .details .bonus {
text-decoration: underline;
padding-bottom: 6px;
font-size: 13px;
}
.top10 .details .usa {
padding-left: 28px;
color: #e8290c;
}
.top10 .details .flag {
background-position: 2px center;
background-image: url(/layoutimages/usa-flag.gif);
background-repeat: no-repeat;
}
.top10 .visit {
font-family: Helvetica, Verdana, Arial, sans-serif;
text-decoration: none;
padding-bottom: 6px;
background-position: -197px -276px;
text-align: center;
color: white;
line-height: 20px;
padding-top: 4px;
width: 156px;
right: 20px;
top: 25px;
position: absolute;
font-weight: bold;
}
.top10 .visit:hover {
background-position: -197px -305px;
}
.top10 .company {
font-style: italic;
color: #626262;
right: 10px;
bottom: 15px;
position: absolute;
}

abduraooft
10-22-2009, 02:05 PM
Try
.top10 .logoholder {
left: 10px;
top: 7px;
position: absolute;
width:133px;
height:80px;
line-height:80px;
text-align: center;
top:0px;
bottom:0px;
margin:auto;

}

jarv
10-22-2009, 02:12 PM
thanks but that didn't work?!

abduraooft
10-22-2009, 02:14 PM
Could you post a link to your page?

jarv
10-22-2009, 02:45 PM
http://www.slots.net/

can a moderator remove this when afterwards thanks

abduraooft
10-22-2009, 02:51 PM
Now just add
.top10 .logo img {/*core.css (line 198)*/
border:1px solid #E9E8E4;
vertical-align:middle;
}

can a moderator remove this when afterwards thanks You may edit your post within three(?) days of posting.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum