父级中的中心div和文本内容的自动大小

Question

我无法将div放在其父级中心。我还想让子div自动适应其文本内容并应用背景颜色。有问题的孩子是＃JoinSft-msg-block

这是我的HTML：

  <div id="JoinSubfooter">
    <div id="JoinSubfooter-wrapper">
        <div id="subft-line"></div>
        <div id="JoinSft-msg-block">some text here</div>
    </div>

这是我的CSS

     #JoinSubfooter {
     width: 100%;
     height: 200px;
     background: transparent url(../images/grey_body_noise.png);
     clear: both;
     /*Clears all columns and sets the footer at the bottom*/
 }
 #JoinSubfooter-wrapper {
     width:981px;
     margin: 0 auto;
     padding: 10px 0px 10px 0px;
 }
 #JoinSft-msg-block {
     display:inline-block;
     padding: 10px 10px 10px 10px;
     background-color:#333333;
     font-family:Arial, Helvetica, sans-serif;
     font-size:18px;
     color:#FFFFFF;
     margin: 0px auto;
 }

Fiddle

Answer 1

如果您使用的是inline-block元素，则只需将text-align center应用于其父级;

即

 #JoinSubfooter-wrapper {
     text-align:center;
     width:981px;
     margin: 0 auto;
     padding: 10px 0px 10px 0px;
 }

Answer 2

您可以尝试使用此代替display:inline-block;，但不确定它是否适用于所有浏览器

display: table;