Kann nicht scheinen, Spalten zu zentrieren (bootstrap)

Ive schaute auf einige der populären Antworten auf stackoverflow, aber es funktioniert nicht für mich. Ich möchte Text und eine Tabelle in der Mitte der Seite zentrieren. Im Idealfall sollte es in einer Bootstrap-Spalte funktionieren, die nicht gleich 12 ist, weil ich in Zukunft eine weitere Spalte hinzufügen möchte und beide zentriert sein sollen.Kann nicht scheinen, Spalten zu zentrieren (bootstrap)

.col-centered{ 
 
    float: none; 
 
    margin: 0 auto; 
 
}

<div class = 'container-fluid'> 
 
    <div class = 'quiz-list'> 
 
    <div class = 'row'> 
 
    <div class = 'col-md-4 col-centered'> 
 
     
 
     This text should be centered and the table underneath should be centered as well 
 
     
 
     <table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
    </div> 
 
    
 
    </div> 
 
    </div> 
 
    
 
</div>

Das ist, was ich bisher haben. Es macht keine Zentrierung. Ich versuchte eine andere Lösung mit Inline-Block und Text Align Center, aber das zentrierte die Tabelle anders als zentriert den Text, was ich nicht will. Irgendwelche Ideen?

Quelle

2016-07-09 nachime

so wollen Sie den Text und die Tabelle Mitte der Seite machen, nicht wahr? – Thinker

ja das ist richtig. Also sollte die Spalte in der Seite zentriert sein und das Zeug innerhalb der Spalte sollte auch innerhalb der Spalte zentriert sein. – nachime

Einfach "text-align: center" hinzufügen. Und wenn Sie später eine andere Spalte hinzufügen möchten, ist es nicht möglich, beide mit 'float: none' zu zentrieren. – makshh

Sie mögen diese Marge 0 Auto für Tabelle hinzufügen zu verwalten.

.col-centered{ 
 
    float: none; 
 
    text-align:center; 
 

 
} 
 

 
.col-centered table{ 
 
    margin:0 auto; 
 
}

<div class = 'container-fluid'> 
 
    <div class = 'quiz-list'> 
 
    <div class = 'row'> 
 
    <div class = 'col-md-4 col-centered'> 
 
     
 
     This text should be centered and the table underneath should be centered as well 
 
     
 
     <table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
    </div> 
 
    
 
    </div> 
 
    </div> 
 
    
 
</div>

Quelle

2016-07-09 14:00:33 ankit

Also, Standardmäßig wird der Text nach links in Twitter Bootstrap ausgerichtet werden. Also, um es Mitte, fügen Sie diese CSS

.col-centered { 
    float: none; 
    margin: 0 auto; 
    text-align: center; 
} 
.table th { 
    text-align: center; 
}

Hier ist die jsFiddle

Hoffe, es hilft Ihnen :)

Quelle

2016-07-09 13:55:33 Thinker

Kann nicht scheinen, Spalten zu zentrieren (bootstrap)

Antwort

Verwandte Themen