How to position images properly

[lucinka77]

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!

[justsomeguy]

In looks like you can add text-align:center to the divs that contain the images.

[davej]

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.

[wgdprosenjit]

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 October 9, 2013 by wgdprosenjit

[Hadien]

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 October 10, 2013 by Hadien