PDA

View Full Version : trying to centre image


rhythmofthecosmos
07-15-2009, 01:30 PM
http://www.leehughes.co.uk/

for some reason the picture is glued to the left. I have put it in a div and tried to center it but still glued. <div id="headpic">
<div align="center"><img src="images/nugget-point-lighthouse.jpg" width="1150" height="250" border="0" /></div>
</div>

Not sure what else to do

Corrosive
07-15-2009, 02:20 PM
http://www.leehughes.co.uk/

for some reason the picture is glued to the left. I have put it in a div and tried to center it but still glued. <div id="headpic">
<div align="center"><img src="images/nugget-point-lighthouse.jpg" width="1150" height="250" border="0" /></div>
</div>

Not sure what else to do

My only guess is that you may have an over-riding style somewhere. You'd be in a much better place without all those inline styles IMO. Why not add the style 'centre' to the styles for headpic rather than putting the image in another div and using inline styles to position it...makes no sense at all!

rhythmofthecosmos
07-15-2009, 02:30 PM
sorted :D

Cheers bud

colaroid
05-04-2010, 01:50 PM
I am trying to centre an image in the main content div (ie it includes text and other images) of my webpage. I have tried adding a style called "CentredImage", the code in the style sheet for this is:

.CentredImage {
text-align: center;
background-position: center;
}

when I click on the image the current css style is CentredImage so I know it is assigned as the right thing however it is still on the left of the page. The only way I can centre it is by clicking on the text in the rest of the document and centering that.

I believe therefore that the rule for the main content is overiding the rule for CentredImage, how can I rectify this?

Corrosive
05-04-2010, 01:51 PM
Try adding a width and auto (left and right) margins to your CSS style. Adding the align-center to the image is pointless as you want to get it aligned within the larger content area.

colaroid
05-04-2010, 02:05 PM
Try adding a width and auto (left and right) margins to your CSS style. Adding the align-center to the image is pointless as you want to get it aligned within the larger content area.

I have just tried this and nothing changed. It is still on the left. I have changed the css style code to:

.CentredImage {
width: 737px;
margin-right: auto;
margin-left: auto;
}

Is that what you meant? (737px is the size I want the picture to be)

Corrosive
05-04-2010, 02:07 PM
Yeah, that's what I meant. Strange it hasn't worked :confused:

colaroid
05-04-2010, 02:10 PM
Yeah, that's what I meant. Strange it hasn't worked :confused:

That would be due to my tremendous html/css skills:oops:

Corrosive
05-04-2010, 02:12 PM
No, it looks right to me. Without being in front of a machine to code on I'm at a bit of a loss...

colaroid
05-04-2010, 02:33 PM
A bit of detective work. I think it is my assignment of the css style that is the problem, although I can't fix it. I deleted all the text-align lefts in my style sheet and added them one by one. When I add the following one everything goes left including the CentredImage style. This style must be acting as a parent style. How do I separate them?


.oneColFixCtrHdr #container #mainContent p {
font-size: 12px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: left;
}
.oneColFixCtrHdr #container #mainContent form table tr td p {
font-size: xx-small;
}
.oneColFixCtrHdr #container #mainContent h1 {
font-size: small;
text-align: left;
}
.oneColFixCtrHdr #container #mainContent h2 {
font-size: small;
}
.CentredImage {
width: 737px;
margin-right: auto;
margin-left: auto;
}

Corrosive
05-04-2010, 03:00 PM
<div class="CentredImage">Image goes here</div>

colaroid
05-06-2010, 03:51 PM
Thanks, its always the really basic things that stop me in my tracks:oops: