31

I'm having a problem with my HTML. I've searched all over the internet, but still no real answer.

I have a website with some images, and I want them to be in the middle. Now, on my screen they're in the middle, but that's because I've put them there by moving them to one side. When my friends to look at it, the image is off-center.

Here's the website; if you are on a 13.5" screen it will look to be in the middle.

connor.p
  • 866
  • 9
  • 19
  • 30
  • Voting to move to the webmasters stackexchange site as it's a better match for this question – bdonlan May 05 '11 at 17:27
  • 8
    bdonlan voted to have your question moved; you don't need to go over to webmasters unless the question actually gets moved. The question will redirect automatically. @bdonlan this is a specific CSS problem, not a webmaster issue. it should stay here. – Thomas Shields May 05 '11 at 17:37
  • 1
    @bdonlan - This is most definitely *not* a Webmasters question. HTML and CSS questions belong on SO. – Dori May 07 '11 at 00:34
  • 3
    I beg you: *please* do not use `
    `. CSS has had a [standardized way to do this since 1996](http://www.w3.org/TR/REC-CSS1-961217.html#text-align) and browser support has been solid for most of that time. Why do it in a way that's been obsolete most of your life?
     – Dori May 07 '11 at 00:50

4 Answers4

76

Try something like this...

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
Thomas Shields
  • 8,874
  • 5
  • 42
  • 77
  • 1
    @connor.p np. dont' forget to mark the post that most helps as answer. – Thomas Shields May 05 '11 at 17:49
  • 1
    +1 for the generalised example, and, in all fairness, I'm using almost the same solution (except that I rely upon the default behaviour of `display: block;`). @connor.p, as Thomas notes, please accept the most helpful answer (if your problem's solved), and, if you feel the other answers helped, consider up-voting those, too... :) – David Thomas May 05 '11 at 17:53
32

text-align:center

Applying the text-align:center style to an element containing elements will center those elements.

<div id="method-one" style="text-align:center">
  CSS `text-align:center`
</div>

Thomas Shields mentions this method

margin:0 auto

Applying the margin:0 auto style to a block element will center it within the element it is in.

<div id="method-two" style="background-color:green">
  <div style="margin:0 auto;width:50%;background-color:lightblue">
    CSS `margin:0 auto` to have left and right margin set to center a block element within another element.
  </div>
</div>

user1468562 mentions this method

Center tag

My original answer was that you can use the <center></center> tag. To do this, just place the content you want centered between the tags. As of HTML4, this tag has been deprecated, though. <center> is still technically supported today (9 years later at the time of updating this), but I'd recommend the CSS alternatives I've included above.

<h3>Method 3</h1>
<div id="method-three">
  <center>Center tag (not recommended and deprecated in HTML4)</center>
</div>

You can see these three code samples in action in this jsfiddle.

I decided I should revise this answer as the previous one I gave was outdated. It was already deprecated when I suggested it as a solution and that's all the more reason to avoid it now 9 years later.

Freesnöw
  • 30,619
  • 30
  • 89
  • 138
  • 4
    Sure `
    ` works, but it's not valid HTML5 - which will become a problem as browsers shed older, deprecated tags.
     – Thomas Shields May 05 '11 at 17:48
  • Really, it has been deprecated? Wow. Is centering possible via another method while only using vanilla HTML (no CSS or JavaScript)? – Freesnöw May 05 '11 at 17:49
  • Without CSS? nope. it stinks. i love `
    `
     – Thomas Shields May 05 '11 at 17:51
  • Ok, thanks for the info :) It's kind of interesting to learn that a language (markup) would purposely deprecate something that requires 3rd party to do otherwise! Thanks again :) – Freesnöw May 05 '11 at 17:53
  • hi DalexL, the
    worked great, just tried it now and it worked first time, i can't beleave that all i needed was that lol :), thank you every one for helping me :)     – connor.p May 05 '11 at 17:53
  • 2
    Oh, no problem :) Just be careful with the expectation that 6 years from now it **might** not work anymore ;) – Freesnöw May 05 '11 at 17:54
  • @Connor, As I said earlier, your site is very great (amazing work with the cloud links). I would suggest having it support all screen lengths and widths so that it didn't require scrolling. It should also go to the homepage as soon as it loads, not after I click the title. Good Luck! – Freesnöw May 05 '11 at 17:56
  • 1
    @DalexL HTML isn't a language, it's markup. And CSS isn't third party to HTML, they're both developed and maintained by the W3C. They go hand in hand. – Thomas Shields May 05 '11 at 17:56
  • lol, knowing my luck it will change much soon than that. just in case you could like to know i have changed the first page using
    and ill do the other pages later, again, thank you all so much for your help     – connor.p May 05 '11 at 17:58
  • 1
    @Thomas Please take your attention to the (markup) written after the word "language". It is a language, not a programming or scripting, however. CSS is not HTML, HTML is not CSS. Regardless of who maintains them, they are not the same. Products should be fully functional by themselves, they shouldn't force clients to use both. If they do, why not merge them as one? The question has been answered, no need to start a flame war or anything else such as it. – Freesnöw May 05 '11 at 18:00
  • 1
    @DalexL aak sorry i missed "markup" - wasn't trying to fight. I was just pointing out that CSS isn't "third party" to HTML anymore than Paint is third party to Windows, which is why there's an HTML style tag just for implementing CSS. That's why it's not entirely odd that they'd deprecate a tag for use of markup, ya know? – Thomas Shields May 05 '11 at 18:03
  • 1
    @Thomas No worry's. At another online forum, we always get in fights about script vs programming vs markup and we've gotten it down through definition so I tend to get on edge when that comes up. The wording for my situation with CSS and HTML was probably not the best. Do you at least see where I was going with it though? :p Have a nice day :) – Freesnöw May 05 '11 at 18:06
  • 1
    @DalexL been there, lol. Yeah i know what you mean. It's a perfectly good tag. Why dump it? you too :) – Thomas Shields May 05 '11 at 18:09
  • center is depricated in HTML5 i guess. hence a better solution is advised. – Krishna Prasad Varma Jan 08 '13 at 06:17
  • Good to see `center` tag back in SO. I remember of getting downvoted because of using this tag in an answer. – tusar Nov 24 '15 at 12:12
9

In your specific case, you can set the containing a element to be:

a {
    display: block;
    text-align: center;
}

JS Bin demo.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
7
<div style='width:200px;margin:0 auto;> sometext or image tag</div>

this works horizontally

user1468562
  • 71
  • 1
  • 1