Center OutputText in Div

Question

I am trying to center an output from php, they are words and put together they make a sentence, but I cannot make it centered at all. All of the php functions do is output a word like 'banana', it is a normal string, nothing weird.

Here is an example of what is going on, clearly there is more room for the word and the word 'tamaleh' isn't even centered underneath the sentence

My Code

<!-- BEGIN Header -->
<div id="header_container">
<div id="header">
    Header Content
</div>
</div>
<!-- END Header -->

<!-- BEGIN Page Content -->
<div id="container">
<div id="output">

<div id="subject" class="word">
    <?php
        echo subject();
    ?>
</div>

<div id="verb" class="word">
    <?php
        echo verb();
    ?>
</div>

<div id="adjective" class="word">
    <?php
        echo adjective();
    ?>
</div>

<div id="noun" class="word">
    <?php
        echo noun();
    ?>
</div>
</div>
</div>

<!-- END Page Content -->

<!-- BEGIN Footer -->
<div id="footer_container">
<div id="footer">
    Footer Content
</div>
</div>
<!-- END Footer -->

CSS

/* Make Header Sticky */
#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { 
padding:80px 0;
width: 100%;
text-align: center;
}

/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }


body{
font-family:tahoma;
}

/*class of output*/
.word{
font-size:72px;
float:left;
padding-left:2%;
}
#output{
display: inline-block;
}

Answer 1

You got my attention with the banana and the nothing weird in the same sentence ;)

Why don't you do something like this?

HTML

<div id="output">
   <div class="sentence">
       <span id="subject" class="word"><?= subject(); ?></span>
       <span id="verb" class="word"><?= verb(); ?></span>
       <span id="adjective" class="word"><?= adjective(); ?></span>
       <span id="noun" class="word"><?= noun(); ?></span>
   </div>
</div>

CSS

.sentence { 
    text-align: center;
}

or, if you prefer to have a somewhat smaller space for your sentence, you could do something like:

CSS

.sentence {
     margin:     0 auto;
     text-align: center;
     width:      50%;
}

Example with links above