Daciana Posted March 11, 2007 Share Posted March 11, 2007 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 More sharing options...
jlhaslip Posted March 11, 2007 Share Posted March 11, 2007 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 More sharing options...
Daciana Posted March 12, 2007 Author Share Posted March 12, 2007 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 More sharing options...
PrateekSaxena Posted March 12, 2007 Share Posted March 12, 2007 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 More sharing options...
roondog Posted March 12, 2007 Share Posted March 12, 2007 Absolute positioning doesn't like it when you change the browser window size. Link to comment Share on other sites More sharing options...
aalbetski Posted March 13, 2007 Share Posted March 13, 2007 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 More sharing options...
ste Posted March 13, 2007 Share Posted March 13, 2007 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 More sharing options...
jlhaslip Posted March 14, 2007 Share Posted March 14, 2007 http://www.jlhaslip.trap17.com/samples/mis...entereddiv.html Link to comment Share on other sites More sharing options...
Daciana Posted March 14, 2007 Author Share Posted March 14, 2007 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 JSActually 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 More sharing options...
Daciana Posted March 14, 2007 Author Share Posted March 14, 2007 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 More sharing options...
PrateekSaxena Posted March 14, 2007 Share Posted March 14, 2007 http://www.w3schools.com/tags/tag_div.asp Link to comment Share on other sites More sharing options...
Daciana Posted March 15, 2007 Author Share Posted March 15, 2007 http://www.w3schools.com/tags/tag_div.aspThanks 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 More sharing options...
PrateekSaxena Posted March 15, 2007 Share Posted March 15, 2007 Id allows you to edit it CSS and the CSS of its children(elements inside it) Link to comment Share on other sites More sharing options...
Daciana Posted March 15, 2007 Author Share Posted March 15, 2007 Ahhh, I get it now. Some concepts are harder than others when you're dead tired. Thanks! Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 15, 2007 Share Posted March 15, 2007 Your welcome! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now