Jump to content

How to position images properly


lucinka77
 Share

Recommended Posts

I looked at the page and couldn't figure out what images were not considered to be centered. In general there are two things that are done to center items. You can apply these and see if they help you. JSG mentioned text-align: center; That works for other items besides text. Then there is also margin: 0 auto; This is usually applied to block items that you want to center inside other blocks. Experiment with those two CSS styles.

Link to comment
Share on other sites

  • 3 weeks later...

Hello, can you please advise on how to center the images of the individual books on this page? http://www.aidanandrewdun.com/books.html

As a beginner, I got into the habit of absolute positioning - I apply it to almost everything and I’m not sure if it’s a good idea…and it's somehow doesn't work here anyway.

Thank you!

yes, please check this points..

 

1. in your HTML code check "<div id="bodycontentbio">" i think problem here in css.

 

2. edit CSS class.. line no. 143

 

 

#bodycontentbio {
left: 470px;
margin-right: 400px;
position: absolute;
top: 450px;
}

 

#bodycontentbio {
left: 370px;
margin-right: 400px;
position: absolute;
top: 450px;
}

 

 

you get more healp

trustedwebscripthelp.blogspot.com
Edited by wgdprosenjit
Link to comment
Share on other sites

the img tag is an inline element. As far as inline elements are concerned in respect to horizontal alignment, the browser will treat them as text. so as was previously said, simply add the css (text-align: center) to the parent element to center the images horizontally. in your specific case you need to go to your css file and change this:

.galleryphoto { width: 400px; padding-bottom: 20px; margin-bottom: 10px;} 

to this:

.galleryphoto { width: 400px; padding-bottom: 20px; margin-bottom: 10px; text-align: center;}

after thinking it over a little I guess I should clarify that this will center the image (and all text and other inline elements) relative to the parent element (elements with the .galleryphoto class). some other things can effect alignment like floating the image or if the parent element is using a display other than block (an old example of aligning inside an display:'inline-block' element in pre-IE8 browsers). however those exceptions shouldn't apply in your case.

 

I guess its possible (though highly unlikely) that you wanted to center the image relative to the window or viewport. in which case, your original use of absolute or fixed positioning would be correct. in this case I'm not sure you can center the images without using something like javascript, and its easily doable with javascript. of course elements using non-static positioning always messes with surrounding elements using static and thus could be a chore to fix. Anywho, I doubt that you really should be messing with the position field in this case,

Edited by Hadien
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...