CODEWITHSUNDEEP
csshtml
Kevin
Kevin

Reputation: 1240

CSS HTML: Centering divs

This should be a no brainer but I have a small mystery with the CSS for a pair of divs. Here is the HTML:

<body>
<form id="form1" runat="server">
<div class="centered" id="selectReport">
    <asp:DropDownList ID="p0" runat="server"></asp:DropDownList>
    <asp:Button ID="viewReport" runat="server" Text="View Report" OnClick="ViewReport" />
</div>
<div>
    ...a centered table...
</div>
<div class="centered" id="buttons">
    <asp:Button runat="server" ID="saveEdits" Text="Save Edits" OnClick="SaveEdits_Click" />
    <asp:Button runat="server" ID="redoEdits" Text="Redo Edits" OnClick="RedoEdits_Click" />
</div>
</form>
</body>

If I put this CSS in the same file:

<style>
    .centered
    {
        margin: auto;
    }
</style>

Both of the divs are left justified.

However if I put this CSS in a separate file:

.centered
{
    margin: auto;
}

the first div is left justified while the second div is centered. I also tried writing identical CSS for each div id with the same results -- the first one is left justified while the second is centered.

Here is the screenshot:

enter image description here

And here is the rendered HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Network Operations Dashboard
</title>
<link href="NetworkOperations.css" rel="Stylesheet" type="text/css" /></head>

<body>
<h1 style="text-align: center; font-size: 30pt" >Network Operations Dashboard</h1>
<form method="post" action="NetworkOperationsReport.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTAyNTkyMjcyNw9kFgICAw9kFgQCAQ8QDxYGHgxBdXRvUG9zdEJhY2tnHg1EYXRhVGV4dEZpZWxkBQ9BcmNoaXZlRmlsZU5hbWUeC18hRGF0YUJvdW5kZ2QQFQYURGFzaGJvYXJkXzIwMTItTWF5LTEGVHJlbmRzBlN0eWxlcwdTY3JpcHRzCEFwcF9EYXRhB0FjY291bnQVBhREYXNoYm9hcmRfMjAxMi1NYXktMQZUcmVuZHMGU3R5bGVzB1NjcmlwdHMIQXBwX0RhdGEHQWNjb3VudBQrAwZnZ2dnZ2dkZAIFDxYCHgdWaXNpYmxlaGRkUrfXkiabK3mrjfzXNLtumhzsq/lXy+2nab/n0oCTc60=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebApp/WebResource.axd?d=J72WHhxz11o7F4T65-nk2s6O8A5yTLJdKan5j1GWRlsyEEDvOExumPz8U-TIG_EGGghKU7cpVHXCxLarpokjZhHzOtYqhdwyIhY1CB4wM9o1&amp;t=634746614287359483" type="text/javascript"></script>

<div class="aspNetHidden">

<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLY4tiyDgLwppLRBwKPpuCFAgLH2cPODQLV24ysCQLizdSlDwKFsO2xAgLfhdOhDAK46ZnWCAKVndrNAwK4r5OaCipKQs8Qpkd25hYiUSafRFyvUGzpZRXvRzfKNuVsC9Js" />
</div>
<div class="centered" id="selectReport">
    <select name="Archives" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;Archives\&#39;,\&#39;\&#39;)&#39;, 0)" id="Archives">
<option selected="selected" value="Dashboard_2012-May-1">Dashboard_2012-May-1</option>
<option value="Trends">Trends</option>
<option value="Styles">Styles</option>
<option value="Scripts">Scripts</option>
<option value="App_Data">App_Data</option>
<option value="Account">Account</option>

</select>
    <input type="submit" name="viewReport" value="View Report" id="viewReport" />
</div>

<div class="centered" id="buttons">
    <input type="submit" name="saveEdits" value="Save Edits" id="saveEdits" />
    <input type="submit" name="redoEdits" value="Redo Edits" id="redoEdits" />
</div>

I must be missing the blindingly obvious but I am stumped. Any advice is appreciated.

Regards.

Upvotes: 0

Views: 1371

Answers (3)

Kevin
Kevin

Reputation: 1240

Answer provided by a comment from Kit Grose: http://jsfiddle.net/ZrdUY/1/.

Upvotes: 0

Kit Grose
Kit Grose

Reputation: 1831

Your div is likely already centred (although if your CSS rules are, literally, just margin: auto, they're not doing anything until you specify a width on your div). The issue is that the controls inside it (your form fields) are not.

Try adding text-align: center; to your .centered CSS rules.

Remember input elements are inline elements, meaning they are affected by rules that would apply to text (like text-align, line-height, text-indent etc.).

You can see this for yourself by using some developer tools to inspect what's going on. IE has some, WebKit browsers like Chrome and Safari have them, Firefox has them, Opera does too. With them, you can (in real time) understand how your CSS rules affect layout, and the shape of the elements on the page.

Upvotes: 0

Only Bolivian Here
Only Bolivian Here

Reputation: 36733

Try giving your divs a fixed width and centering them:

.centered {
    margin: 0 auto;
    width: 60%; // or whatever you need.
}

To center a div you usually need to have given it a concrete width.

Upvotes: 1

Related Questions