css - 在父级内居中 div 并自动调整文本内容大小

Question

我无法将 div 在其父项中居中。我还想让子 div 自动适应其文本内容并应用背景颜色。有问题的 child 是#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

如果您使用的是内联 block 元素，则只需将文本对齐居中应用于其父元素即可；

即

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