Div中的中心OutputText

Question

我试图将来自php的输出集中在一起，它们是单词并放在一起形成一个句子，但我不能让它居中。所有的PHP函数都输出了像“香蕉”这样的单词，这是一个普通的字符串，没有什么奇怪的。

这是一个正在发生的事情的例子，显然这个词有更多的空间和“玉米”这个词。甚至没有集中在句子下面

我的代码

<!-- 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

你在同一句话中用香蕉和没什么奇怪的引起我的注意;）

为什么不做这样的事情？

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;
}

或者，如果您希望句子的空间稍小，您可以执行以下操作：

CSS

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

Example with links above