CSS Margins Not Centering

Question

My friend and I are coding a quick web site and are having issues centering the elements with CSS. We have tried using the margin: 0 auto command on the individual elements, but it didn't work. All the other style changes from the CSS sheet work. Can anyone tell me why margin: 0 auto didn't work or a way to center all the elements in the body?

Html Code:

<!DOCTYPE html>
<html>
<head>
<title>MatchUp</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>

<body>

<br>
<img id="banner" src="banner.png" alt="Banner" width=1000 height=300>
<br>
<form>
<input id="name" type="text" name="whateva"<br>
<br>
<input id="heart" type="image" src="heart.png" width=250 height=250>
</form>
<br>

</body>

</html>

CSS Code:

body{
background-image: url('bg.jpg');
}

#name{
height: 30px;
width: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: 0; 
}

I don't see `margin: 0 auto;` anywhere in your CSS, secondly, you haven't wrapped the elements so you should do that, assign some fixed `width` and than use `margin: 0 auto;` and than it will work... — Mr. Alien, Feb 08 '14 at 06:02

score 2 · Accepted Answer · edited Feb 08 '14 at 15:43

2

Why margin: 0 auto; did not work:

There could be a few reasons why your elements didn't center.

For margin: 0 auto; to work, an element needs to have a set width like width: 100px;.
If the element has a set width and still does't center, try display: block;.

Those two things will always work.

How to center elements without margin: 0 auto;:

If you're just trying to center all elements inside the body tag, just use text-align: center; on the body tag to accomplish that.

That said, I don't think you were trying to do that though.

edited Feb 08 '14 at 15:43

Code Maverick

20,171
12
62
114

answered Feb 08 '14 at 06:16

Tyler McGinnis

34,836
16
72
77

1

+1 for addressing both concerns, why the `margin: 0 auto;` didn't work ***and*** how to center all elements within the body if that's what they truly wanted. This is the only complete answer so far. – Code Maverick Feb 08 '14 at 15:52

score 0 · Answer 2 · edited Feb 08 '14 at 15:45

0

You need to set the width where you want to use margin: 0 auto;. So if you wanted to center the body within the browser, you could do something like this:

body
{
    background-image: url('bg.jpg');
    margin: 0 auto;
    width: 900px;
}

edited Feb 08 '14 at 15:45

Code Maverick

20,171
12
62
114

answered Feb 08 '14 at 07:06

Ulysses

187
2
17

+1 for explaining the first part of why the `margin: 0 auto;` didn't work. -1 for not explaining the second part of how to center all elements. Add that, and I'll upvote again. – Code Maverick Feb 08 '14 at 15:50
^_^ 'margin: 0 auto;' only works if it comes with 'width: npx;' take note on that. Width is the important part of centering a div using margin auto. – Ulysses Feb 09 '14 at 01:46

score 0 · Answer 3 · answered Feb 08 '14 at 07:21

Firstly, I assume you want to center your webpage like most of the websites. The method is to wrap all your HTML elements inside one parent div, give it a standard width most of the sites follow (it's up to you). In this case I used 960px. Than auto margin that parent container. So your whole page center aligns perfectly. My suggestion don't use 'br' tags like that, utilize the margin properties of CSS. Have a look at Bootstrap, it will help you a lot.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>MatchUp</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="pageContainer">
        <img id="banner" src="banner.png" alt="Banner" width=1000 height=300 />
        <form>
            <input id="name" type="text" name="whateva" />
            <input id="heart" type="image" src="heart.png" width=250 height=250 />
        </form>
    </div>
</body>
</html>

CSS

body{
    background-image: url('bg.jpg');
}

#pageContainer {
    width: 960px;
    margin: 0 auto;
}

#name{
    height: 30px;
    width: 200px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    outline: 0; 
}
...

This will get you a nicely centered page. Comment if you need any help.

Before creating an answer based on an assumption, why not ask the OP if that's what they wanted first? Obviously if they truly do want to center the whole page within the browser, this would do it. However, the OP specifically said _We have tried using the `margin: 0 auto` command on the individual elements, but it didn't work._ and _center all the elements in the body_. And this answer does not answer that. Now if you were to update your answer to include the fix for the original concern and _then_ menionted how to center the whole thing as an aside to let them choose, I'll remove my DV. — Code Maverick, Feb 08 '14 at 15:33

score -3 · Answer 4 · answered Feb 08 '14 at 06:04

-3

<center>

http://jsfiddle.net/pellmellism/T26Pw/

there is your fiddle....try using the good old fashioned center tag. KISS

answered Feb 08 '14 at 06:04

user1062478

29
3

Nahh, this is bad choice. – Shiva Avula Feb 08 '14 at 07:12
@ScriptShiva - If you think it's a bad choice, then explain how so rather than just downvoting. This is a new user, how about some encouragement? – Code Maverick Feb 08 '14 at 15:18
@user1062478 - The `` tag was deprecated and thus it's probably not the best answer to suggest to someone. [Take a look at this answer for clarification on deprecation](http://stackoverflow.com/a/1798893/682480). – Code Maverick Feb 08 '14 at 15:21
My friend and I were using the `` tag, but we didn't like how they looked in the code... I guess we're a little OCD – SkippyNBS Feb 09 '14 at 05:27

CSS Margins Not Centering

4 Answers4