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.

Improve this question
4
  • Voting to move to the webmasters stackexchange site as it's a better match for this question
    – bdonlan
    Commented May 5, 2011 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
    Commented May 5, 2011 at 17:37
  • 1
    @bdonlan - This is most definitely not a Webmasters question. HTML and CSS questions belong on SO.
    – Dori
    Commented May 7, 2011 at 0:34
  • 3
    I beg you: please do not use <center>. CSS has had a standardized way to do this since 1996 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
    Commented May 7, 2011 at 0:50

4 Answers 4

Reset to default
76

Try something like this...

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
Improve this answer
2
  • 1
    @connor.p np. dont' forget to mark the post that most helps as answer.
    – Thomas Shields
    Commented May 5, 2011 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
    Commented May 5, 2011 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.

Improve this answer
15
  • 4
    Sure <center> works, but it's not valid HTML5 - which will become a problem as browsers shed older, deprecated tags.
    – Thomas Shields
    Commented May 5, 2011 at 17:48
  • 2
    Oh, no problem :) Just be careful with the expectation that 6 years from now it might not work anymore ;)
    – Freesnöw
    Commented May 5, 2011 at 17:54
  • 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
    Commented May 5, 2011 at 17:56
  • 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
    Commented May 5, 2011 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
    Commented May 5, 2011 at 18:03
9

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

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

JS Bin demo.

Improve this answer
7 
<div style='width:200px;margin:0 auto;> sometext or image tag</div>

this works horizontally

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.