центр div внутри родителя и размер авто в текстовое содержимое

Question

У меня возникли проблемы с центрированием div внутри его родителя. Я также хотел бы сделать, чтобы дочерний div автоматически соответствовал его текстовому контенту с использованием цвета фона. Ребенок в вопросе # JoinSft-сообщ-блок

вот мой 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

Если вы используете встроенный блок элемента , вы можете просто применить центр выравнивания текста к его родительскому элементу;

т.е.

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

Answer 2

Вы могли бы попробовать это вместо display:inline-block;, но не уверен, если он работает во всех браузерах

display: table;