Czy jest jakiś arkusz CSS do wyrównania pudełka/elementu?

Question

Widziałem ludzi, którzy mówią, że nie używają <div align="center">Some Text</div> i <center>Some Text</center>, ponieważ są nieaktualne, ale nie mogę znaleźć żadnego CSS, aby dopasować wszystko do elementu. Najbliższą rzeczą, którą znalazłem jest text-align: center;, ale to tylko wyrównuje tekst, a nie elementy. Czy istnieje jakiś CSS, który pozwala na wyrównanie elementów?

To jest CSS. Rzeczą, którą chcę wyśrodkować jest #editor. Jest to znacznik <textarea></textarea>.

@font-face { 
 
\t font-family: Bandits; 
 
\t src: url("Bandits.ttf"); 
 
\t font-weight: bold; 
 
} 
 

 
#editor { 
 
\t position: absolute; 
 
\t bottom: 35px; 
 
\t left: 35px; 
 
\t width: 800px; 
 
\t height: 600px; 
 
\t resize: none; 
 
} 
 

 
#see-result { 
 
\t position: absolute; 
 
\t top: 276px; 
 
\t left: 425px; 
 
\t width: 125px; 
 
\t letter-spacing: 2.7px; 
 
\t font-weight: bold; 
 
\t background-color: #888; 
 
\t text-align: center; 
 
\t padding-top: 6.5px; 
 
\t padding-bottom: 6.5px; 
 
\t cursor: pointer; 
 
\t font-family: Calibri; 
 
} #see-result:hover { 
 
\t background-color: #ABABAB; 
 
} 
 

 
header { 
 
\t text-align: center; 
 
\t font-size: 65px; 
 
\t font-family: Bandits; 
 
\t letter-spacing: 2px; 
 
}

Answer 1

Aby poziomo wyśrodkować pola trzeba nadać mu wyraźny szerokość, a następnie ustawić swoje marże do "0 Auto":

.container{ 
 
    border:solid 2px lightblue; 
 
    width:600px; 
 
    height:400px; 
 
} 
 

 
.center{ 
 
    border:solid 2px red; 
 
    height:200px; 
 

 
    /*centering CSS*/ 
 
    width:200px; 
 
    margin:0 auto; 
 
}

<div class="container"> 
 
    <div class="center"> 
 
     This box is centereed 
 
    </div> 
 
</div>

Możesz także wyrównać w poziomie pudełko, nadając mu kontener nadrzędny wartość centrum wyrównania tekstowego i czyni go display: inline:

.container{ 
 
    border:solid 2px lightblue; 
 
    width:600px; 
 
    height:400px; 
 
    text-align:center; 
 
} 
 

 
.center{ 
 
    border:solid 2px red; 
 
    width:200px; 
 
    height:200px; 
 
    
 
    /*Centering CSS*/ 
 
    display:inline; 
 
    text-align:center; 
 
}

<div class="container"> 
 
    <div class="center"> 
 
     This box is centereed 
 
    </div> 
 
</div>

Wreszcie, można użyć schematu flexbox do poziomo wyrównać pojemniki blokowe w ich rodzica:

.container{ 
 
    border:solid 2px lightblue; 
 
    width:600px; 
 
    height:400px; 
 
\t 
 
    /*Centering CSS*/ 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 

 
.center{ 
 
    border:solid 2px red; 
 
    width:200px; 
 
    height:200px; 
 
}

<div class="container"> 
 
    <div class="center"> 
 
     This box is centereed 
 
    </div> 
 
</div>

Answer 2

Można użyj css flexbox do pozycjonowania pionowego i poziomego tutaj

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 450px; 
 
    height: 250px; 
 
    background-color: lightgrey; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
} 
 

 
.flex-item { 
 
     background-color: cornflowerblue; 
 
     width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
</div>