Comment centrer le contenu dans un div

Question

Je suis en train de centrer un contenu qui contient une table dans une div ... Mais je ne peux pas sembler trouver comment faire ...

Fondamentalement Id aiment mettre un texte à côté d'une table, et le centre de la table et le texte à la page ...

le contenu que je suis en train de centre:

 <div style="background: purple; padding: 5px;"> 
      <div> 
      <table style="float: left;"> 
       <tr> 
        <th>This</th> 
        <th>is</th> 
        <th>a</th> 
        <th>test</th> 
       </tr> 
      </table> 
      </div> 
      <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span> 
     </div> 

Ce que j'ai essayé:

<div style="background: red; width: 100%; text-align: center"> 
     <div style="background: purple; padding: 5px;"> 
      <div> 
      <table style="float: left;"> 
       <tr> 
        <th>This</th> 
        <th>is</th> 
        <th>a</th> 
        <th>test</th> 
       </tr> 
      </table> 
      </div> 
      <span style="background: yellow; margin-left: 15px; float: left;">This is a test</span> 
     </div> 
    </div> 

Si quelqu'un serait en mesure de me dire ce que je fais mal ici, il serait grandement apprécié.

Answer 1

Voilà comment vous le faire:

http://jsfiddle.net/7TEqW/2/

HTML:

<div class="outer"> 
    <div class="inner"> 
     <table> 
      <tr> 
       <td>TABLE TEXT</td> 
      </tr> 
     </table> 
     <span>SPAN TEXT</span> 
    </div> 
</div> 

CSS:

.outer { 
    width: 100%; 
    text-align: center; 
} 

.inner { 
    display: inline-block; 
    margin: 0 auto; 
} 

table { 
    width: 200px; 
    float: left; 
    margin-right: 20px; 
    background: #999; 
} 

span { 
    display: inline-block; 
    width: 100px; 
    background: #ccc; 
} 

Answer 2

Retirer float:left et essayez d'ajouter margin:0 auto

.wrap{ 
background: purple; padding: 5px;  
    text-align:center; 
    overflow:auto; 
    position:relative 
} 
table{ 
    background:pink; 
    margin:0 auto 
} 

span{ 
    background: yellow; margin-left: 15px; 
     margin:0 auto 
} 

DEMO

Answer 3

Vous pouvez centrer des éléments à l'aide text-align:center si elles sont inline ou inline-block. Si nous supprimons les flottants et les asseyons l'un à côté de l'autre en utilisant display:inline-block sur le <table>, cette méthode peut être utilisée.

jsFiddle

CSS

table { 
    display:inline-block; 
} 
.wrapper { 
    text-align:center; 
} 

HTML

<div class="wrapper" style="background: purple; padding: 5px;"> 
    <table> 
     <tr> 
      <th>This</th> 
      <th>is</th> 
      <th>a</th> 
      <th>test</th> 
     </tr> 
    </table> 
    <span style="background: yellow; margin-left: 15px;">This is a test</span> 
</div> 

Answer 4

vous pouvez fournir à ID div intérieure dire intérieure et extérieure disent en haut div:

#outer{width:100%} 
#inner{float:none;margin:0 auto;display:table;} 

si vous trouvez un problème faites le moi savoir !!

Answer 5

Placez le contenu souhaité à l'intérieur d'un élément <p style="text-align: center;"> , et il sera centré horizontalement.