Jump to content

Centering an image within a browser window


Daciana
 Share

Recommended Posts

Forgive me if I have been blind to an obvious fix for this issue, but I have been wracking my brain and searching for the answer and still it eludes me. I'm a novice to both html and css but am determined. Q: Is there any way to center an image within a browser window. For example. I set my spacing in the markup so that the image is centered right where I want it, but if I narrow my browser window to say half the normal width, my text narrows properly, but the image is offset. Is this because the text wraps and goes from margin to margin but the image is much too small by comparison? Any suggestons would help!

Link to comment
Share on other sites

Have you tried using percentages as the margin size instead of pixels?Perhaps we can see your code and preferably a link to your page to see it behaving as you describe?

Link to comment
Share on other sites

Thanks for the suggestion. I think I have solved this issue as I wasn't using either pixels or percentages for my margins in the inline style. I was trying to grapple the html vspace and hspace into behaving how I wanted. I have since changed to the css inline margins using percentages and it seems to work the way I had intended. Here's my code I used.in the style type:img.end {position:absolute; margin-right:55%; margin-left:47%; margin-top:20%}in the body:<img class="end" src="red-face.jpg" width="100" height="131">When narrowing my browser window the text, my table, and now the image all stay centered within the browser window, no matter how narrow or wide it is. I thought I had tried this approach already but perhaps I had an incompatible combination or just couldn't see the forest for all the trees. I'd love to give a link for this page, however it's still localized on my computer. Once I get the bulk of the website put together, then I'll upload it all to a web server.Thanks so much for the help!

Link to comment
Share on other sites

What you can do is the you can put a function on window resize and then though JS only you can reposition your image. If you want the precise code to do the same, tell me and I will post it, that is IF you wanna use JS

Link to comment
Share on other sites

if you wrap your image in a div, you can accomplish this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><div style="margin:0px auto;width:1px;border:none">	 <img src="http://localhost/your image.jpg" /></div>

Link to comment
Share on other sites

if you wrap your image in a div, you can accomplish this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><div style="margin:0px auto;width:1px;border:none">	 <img src="http://localhost/your image.jpg"></img></div>

you dont need this </img>
Link to comment
Share on other sites

What you can do is the you can put a function on window resize and then though JS only you can reposition your image. If you want the precise code to do the same, tell me and I will post it, that is IF you wanna use JS
Actually I would love to see this. I've barely started reading about JS and all it's cpabilities but it looks very promising. Eventually I'll have to work with JS to move to the next level. Thank you for the offer. :)
Link to comment
Share on other sites

if you wrap your image in a div, you can accomplish this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><div style="margin:0px auto;width:1px;border:none">	 <img src="http://localhost/your image.jpg" /></div>

I've seen this "div" thing before in other posts....what exactly is it? :)
Link to comment
Share on other sites

Link to comment
Share on other sites

Thanks for the link. My book didn't cover the div tag that I remember so I didn't know this was an html tag. I think this quote sums a div up neatly, at least to my understanding, "....a div plays the role of a container for other HTML elements." So basically it blocks everything between the <div> and </div> tags and assigns whatever attributes you include within the tags to that blocked (or div'd) area. Is that right? If this is true, then what purpose does the id attribute serve as the alignment attribute, etc. would be applied to everything between the <div> and </div> tags anyways.....unless....perhaps this blocked element is being given further attributes via a CSS style elsewhere, hence the id or class is required? Hmmm.... :) Sample code found:"<div id="menu" align="right" ><a href="">HOME</a> | <a href="">CONTACT</a> | <a href="">ABOUT</a></div><div id="content" align="left" bgcolor="white"><h5>Content Articles</h5><p>This paragraph would be your content paragraph with all of your readable material.</p></div>
Link to comment
Share on other sites

Id allows you to edit it CSS and the CSS of its children(elements inside it)

Link to comment
Share on other sites

Ahhh, I get it now. :) Some concepts are harder than others when you're dead tired. Thanks!

Link to comment
Share on other sites

Your welcome!

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...