Jump to content

Centering Images


Primal
 Share

Recommended Posts

I want to center an image that I am using as a title at the top of my homepage. How would I do this instead of using <center>?

Link to comment
Share on other sites

or the HTML strict valid way:

<div style="text-align:center; margin-left:auto; margin-right:auto;"> </div>

Link to comment
Share on other sites

Too long...:)
not really Xtazy considering that you would probably only need define it once in css and then just call that class whenever nessecary. probably less code in the long run
Link to comment
Share on other sites

rather than putting this in your html:<div style="text-align:center; margin-left:auto; margin-right:auto;"> </div>have a css class:.center {text-align:center; margin-left:auto; margin-right:auto;}then you have: <div class="center"></div>whenever you need it

Link to comment
Share on other sites

Yes, I know, but I want to center an image. Would this do that even though it's called "text-align"?

Link to comment
Share on other sites

img { margin-left:auto; margin-right:auto; text-align:center; padding:0;}The text-align is for some older non-standard compliant Browser to recognize the attempt to centre the picture. These older Browsers don't recognize the margin:auto. It works on Images, too.

Link to comment
Share on other sites

I seriously can't get it to work! Here, this is what I have in the HTML file,

<img class="title" src="Title.jpg" alt="Primal Corporation">

and this is what I have in the CSS file:

img {margin-left:auto; margin-right:auto; text-align:center; padding:0}

It will not work!

Link to comment
Share on other sites

Yeah , but to me is simple to <center> and </center> all i want to center :) instead of using that code once...Dunno why, but it looks more....more...i dunno, more something...:)...and it's easier to remember...for me...:)...
But the <center> tag is deprecated http://www.w3schools.com/tags/tag_center.asp
I seriously can't get it to work! Here, this is what I have in the HTML file,
<img class="title" src="Title.jpg" alt="Primal Corporation">

and this is what I have in the CSS file:

img {margin-left:auto; margin-right:auto; text-align:center; padding:0}

It will not work!

Try this img { display: block; margin-left: auto; margin-right: auto; }
Link to comment
Share on other sites

Nope. It put the two image links at the bottom of the page on top of each other instead of next to each other but it didn't do anything to the one at the top. I don't know what wrong.

Link to comment
Share on other sites

http://www.w3.org/TR/CSS21/selector.html#class-htmlThat link shows how to use class selectors.And this is a good example of why we ask for your code to look at. Until now, there has been no mention of the image being 'classed', so no-one has considered it important, but had the code been posted, we would've determined the class selector for the images.try this:
img.title {margin: 0 auto; text-align:center;}

Link to comment
Share on other sites

As people has said earlier, do it this way:HTML:<div id="center_image"><img src="yourimage.gif" alt=""></div>CSS:#center_image {width: 100%;// There are two options I would have used in this case. You choose yourself:// width: 100%; and text-align: center;// OR// margin: 0 auto; and text-align: center; (and not width: 100%;, but width: 300px; (just an example width instead of 100%))text-align: center;// And now you just add on the rest :)}

Link to comment
Share on other sites

if you have problems you can always just put the image in a table like this, i know this may be a little long but tables can also be handy to align other content with the picture<table width="whatever your picture width is" height="whatever your picture height is" align="center"><tr><td width="picture width" height="picture width">Image url</td></tr></table

Link to comment
Share on other sites

Thank you very much, pulpfiction!!! :):) Your answer is the only one that would work! Does anyone have any idea why that would be?P.S. Primefalcon, your probably would have to but I am trying to get it HTML 4.01 Strict, and I think the align attribute is deprecated. :)

Link to comment
Share on other sites

Primal, link us to your page or post the code in its entirety so we don't have to guess. And using tables for page structure is not the right way according to the w3c. Tables are for presentation of 'tabular' data. Images are not 'tabular' data.

Link to comment
Share on other sites

if you have problems you can always just put the image in a table like this, i know this may be a little long but tables can also be handy to align other content with the picture<table width="whatever your picture width is" height="whatever your picture height is" align="center"><tr><td width="picture width" height="picture width">Image url</td></tr></table
No, because you're not gonna use tables, unless its tabular data, in other words td. (I think tabular is right, isn't it?)
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...