Wie man ein div innerhalb einer Reihe zentriert

Question

Ich habe eine Reihe mit der Breite von 1172px geerbt von seinem Elternteil. Ich habe ein Div in der Zeile deklariert und möchte es zentrieren. Ich habe versucht, margin: 0 auto und text-align:center anzuwenden, die nicht funktionierten. Wie zentriere ich es?

<div class="row"> 
    <div id="YelloBox" class="YelloBox"> 
    </div>      
</div> 

css:

.YelloBox { 
    width: 515px; 
    height: 602px; 
    opacity: 0.3; 
    background-color: #ffffff; 
    background-color: var(--white); 
    border: solid 1px #a28c77; 
    border: solid 1px var(--reddish-grey); 
    text-align: center; 
    margin: 0 auto; 
} 

Answer 1

Fügen Sie einfach display:table in css

.YelloBox { 
 
    width: 515px; 
 
    height: 602px; 
 
    opacity: 0.3; 
 
    background-color: #ffffff; 
 
    background-color: var(--white); 
 
    border: solid 1px #a28c77; 
 
    border: solid 1px var(--reddish-grey); 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    display: table; 
 
}

Answer 2

Ich denke, das ist alles, was Sie brauchen, um Aligns vollständig zu verstehen. Schaue gut hin und spiele mit den Demos, weil sie ziemlich gut und interaktiv sind.

http://www.w3schools.com/cssref/css3_pr_flex.asp

Flex können auch tun elbe, aber lesen die Supportseite für eine Eigenschaft, weil es in einigen Browsern scheitern könnte.

http://caniuse.com/#search=flex

Answer 3

Nur center-block Klasse.

<div class="row"> 
    <div id="YelloBox" class="YelloBox center-block"></div> 
</div> 

Details siehe here.