Jump to content
Sign in to follow this  
lucinka77

How to position images properly

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...