Cannot center span element

Question

I've got three items on the top of my web page. I expect them to be located left, center, and right. However, that one in the center is a bugger (partially because it's created late in the game). I've tried the auto margin tricks with no luck. I've tried relative positioning but can't get it perfectly centered (and it draws on its neighbors). In the full code below, can you get the "showInMiddle" centered? You need to click the login button for that item to show up. Ideally, the items would wrap if the page was too narrow but still maintain their alignment (rather than drawing on top of each other or all on the left).

<!DOCTYPE html>
<html>
<head>
    <title>This is dumb</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">

<header style="width: 100%">

<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4>

<span id="showInMiddle" data-bind="visible: LoggedIn">
    I'm supposed to be in the middle with my two buttons.
    <button>B1</button>
    <button>B2</button>
</span>

<div id="showOnRight" style="display: inline; float: right">
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
        <span>Howdy</span>
        <input type="submit" value="Logout" />
    </form>
</div>

<nav><hr/></nav>

</header>

<script type="text/javascript">

    function LoginViewModel() {
        var self = this;
        self.LoggedIn = ko.observable(false);
        self.login = function (formElement) { self.LoggedIn(true); };
        self.logout = function (formElement) { self.LoggedIn(false); };
    }

    ko.applyBindings(new LoginViewModel());

</script>

</body>
</html>

Check out http://jsfiddle.net – Šime Vidas May 18 '12 at 23:06 — Šime Vidas, May 18 '12 at 23:06

netrox · Answer 1 · 2012-05-19T00:07:20.780

You cannot center a span because it's an inline element which doesn't know its width by default.

You can simply replace span with div like this (watch the inline CSS):

<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center ">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>

This is quick - I am off to go home. Try adjusting the width where the login form is concerned. You need to be aware that the total of floatdiv should never exceed the total of container or it will go wrong.

<!DOCTYPE html>
<html>
    <head>
        <title>
            This is dumb
        </title>
        <style>
        #container {
            width:900px; 
            margin: auto 0; 
            overflow: auto;           

        }        
        .floatdiv {
            float:left;

            margin:0;                        

        }

        </style>        

    </head>  

    <body style="font-family: 'Segoe UI'; margin: 5px 20px;">
    <div id="container">

            <div class="floatdiv" style="font-size: 1.1em; width:200px">
                I'm the title                                                                
            </div>
            <div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px ">

                <button>
                    B1
                </button>
                <button>
                    B2
                </button>             
            </div>
            <div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right">
                <form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
                    <input type="text" placeholder="Username" />
                    <input type="password" placeholder="Password" />
                    <input type="submit" value="Login" />
                </form>
                <form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
                    <span>
                        Howdy
                    </span>
                    <input type="submit" value="Logout" />
                </form>
            </div>

        </header>
  </div>        

    </body>

</html>

This is correct, you can however adjust its positioning. See this http://stackoverflow.com/questions/8792343/css-cannot-get-one-spanned-style-to-override-another-inherited-style-and-align — Craig van Tonder, May 18 '12 at 23:25
This solution doesn't work. Not only does it put the middle element on its own line, but it forces the right-hand element onto a third line. I want all three items on the same line/row. — Brannon, May 18 '12 at 23:49
Actually, that would require a rewrite of your HTML... which is quite easy. Want to see it? — netrox, May 18 '12 at 23:50
Your update is closer, but still not correct. The inclusion of the second "float: left" puts the centered stuff on the far left of the title. — Brannon, May 19 '12 at 00:20

score 0 · Accepted Answer · answered May 19 '12 at 00:35

It ends up that this works flawlessly when you use a table. Who knew?

<!DOCTYPE html>
<html>
<head>
    <title>This is dumb</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>

    <style type="text/css">
        table, tr, td, h4, div { margin: 0px; padding: 0px; }
    </style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">

<header style="width: 100%">

<table style="width: 100%; border-width: 0px;">
<tr>
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td>
<td>
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;">
    I'm supposed to be in the middle with my two buttons.
    <button>B1</button>
    <button>B2</button>
</div>
</td>
<td>
<div id="showOnRight" style="text-align: right;">
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
        <span>Howdy</span>
        <input type="submit" value="Logout" />
    </form>
</div>
</td>
</tr>
</table>

<nav><hr/></nav>

</header>

<script type="text/javascript">

    function LoginViewModel() {
        var self = this;
        self.LoggedIn = ko.observable(false);
        self.login = function (formElement) { self.LoggedIn(true); };
        self.logout = function (formElement) { self.LoggedIn(false); };
    }

    ko.applyBindings(new LoginViewModel());

</script>

</body>
</html>

Actually, I'd suggest a table which is much easier but we'd get frowns from web developers. But personally, don't worry.. it works just fine for now. :) — netrox, May 19 '12 at 03:59
Tables are not all bad... In my opinion to build an entire layout using one causes issues when rendering on certain browsers and at certain resolutions... But using tables for certain parts of the layout and coding them corectly to avoid the mentioned flaws, usually works fine for me. Just a bit more tricky to style in a compatible way. — Craig van Tonder, May 19 '12 at 10:29
Current HTML standards emphasize that tables convey tabular data (spreadsheets, calendar, etc), not be used as a layout. But as a layout, boy, HTML tables are incredibly effective, consistent, and intuitive. It behaves consistently across all browsers with all properties set to zero. But with CSS3, you can specify which elements should be treated as a "table" meaning that you can design layouts with elements that are treated as "table" - more info at http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/ — netrox, May 19 '12 at 16:35

Cannot center span element

2 Answers2