CSS: Jak wyrównać elementy wokół środkowego elementu?

Question

Próbuję utworzyć prostą nawigację dokumentu składającego się z trzech części:

1. Kilka poprzednich numerów stron (jeśli istnieją)
2. Bieżący numer strony (to musi być wyśrodkowany)
3. Kilka Nadchodzący numery stron (jeśli występują)

Ważne jest, aby aktualny numer strony był zawsze poziomo wyśrodkowany w kontenerze nadrzędnym. Pozostałe dwie części powinny równomiernie zająć pozostałą przestrzeń poziomą.

Ten JSFiddle ilustruje moje dwie próby rozwiązania tego problemu.

Rozwiązanie 1: użyj text-align: center. Osiąga to pożądany wynik, ale tylko wtedy, gdy obie strony mają równą szerokość. Jeśli nie, aktualny numer strony nie będzie znajdować się pośrodku.

HTML

<div class="container"> 
    <input type="button" value="47"> 
    <input type="button" value="48"> 
    <input type="button" value="49"> 
    <input type="text" size="5" maxlength="5" value="50"> 
    <input type="button" value="51"> 
    <input type="button" value="52"> 
    <input type="button" value="53"> 
</div> 

CSS

.container, input { 
    text-align: center; 
} 

Roztwór 2: wykorzystanie określonych szerokościach ręcznie rozprowadzić poziomej powierzchni równomiernie. Skutecznie centruje bieżący numer strony we wszystkich okolicznościach, ale wymaga szerokości kodu.

HTML

<div class="container"> 
    <div class="left"> 
     <input type="button" value="47"> 
     <input type="button" value="48"> 
     <input type="button" value="49"> 
    </div> 
    <div class="right"> 
     <input type="button" value="51"> 
     <input type="button" value="52"> 
     <input type="button" value="53"> 
    </div> 
    <div class="center"> 
     <input type="text" size="5" maxlength="5" value="50"> 
    </div> 
</div> 

CSS

.left { 
    width: 40%; 
    float: left; 
    text-align: right; 
} 
.right { 
    width: 40%; 
    float: right; 
    text-align: left; 
} 
.center { 
    width: 20%; 
    margin-left: 40%; 
} 

Żadne z tych rozwiązań naprawdę robić, co chcę. Czy istnieje sposób centrowania bieżącego numeru strony przy jednoczesnym umożliwieniu wyrównania innych elementów do ich naturalnego rozmiaru, a nie do arbitralnego piksela lub szerokości procentowej?

Answer 1

Należy użyć flex i pływak właściwości razem, kasa moje rozwiązania :

.container { 
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
} 
 

 
.container, input { 
 
    text-align: center; 
 
} 
 

 
.container:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px dotted #ff0000; 
 
} 
 

 
.left { 
 
    display: inline-block; 
 
    flex: 1; 
 
    
 
} 
 

 
.left input { 
 
    float: right; 
 
} 
 

 
.right { 
 
    display: inline-block; 
 
    flex: 1; 
 
} 
 

 
.right input { 
 
    float: left; 
 
} 
 

 
.center { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="48"> 
 
     <input type="button" value="49"> 
 
    </div> 
 
    <div class="center"> 
 
     <input type="text" size="5" maxlength="5" value="50"> 
 
    </div> 
 
    <div class="right"> 
 
     <input type="button" value="51"> 
 
     <input type="button" value="52"> 
 
     <input type="button" value="53"> 
 
    </div> 
 
    
 
</div>

Answer 2

Wypróbuj poniższy układ tabeli CSS.

.container { 
 
    width: 100%; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
} 
 
.left, .center, .right { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.center { 
 
    width: 50px; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="47"> 
 
     <input type="button" value="48"> 
 
     <input type="button" value="49"> 
 
    </div> 
 
    <div class="center"> 
 
     <input type="text" size="5" maxlength="5" value="50"> 
 
    </div> 
 
    <div class="right"> 
 
     <input type="button" value="51"> 
 
     <input type="button" value="52"> 
 
     <input type="button" value="53"> 
 
    </div> 
 
</div>

jsfiddle

Answer 3

Oto rozwiązanie można rozważyć:

używają ukrytych przycisków, aby zawsze zachować taką samą liczbę znaczników po lewej i prawej stronie

<div class="container"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input style="visibility: hidden" type="button" value="0"> 
    <input type="text" size="5" maxlength="5" value="1"> 
    <input type="button" value="2"> 
    <input type="button" value="3"> 
    <input type="button" value="4"> 
</div> 

Answer 4

Zamiast określania szerokości w% można użyć CSS calc podzielić na całej szerokości na 3 części:

[50% - 25px][50 px][50% - 25px] 

Następnie kliknij prawym wyrównać lewą część, lewa wyrównać prawą część i gotowe. Podczas używania SASS lub LESS wystarczy określić szerokość środkowej części.

.container { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.container > * { 
 
    display: inline-block; 
 
} 
 
.container .left { 
 
    width: calc(50% - 25px); 
 
    text-align: right; 
 
} 
 
.container > input { 
 
    width: 50px; 
 
    margin: 0px; 
 
    text-align: center; 
 
} 
 
.container .right { 
 
    width: calc(50% - 25px); 
 
    text-align: left; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
     <input type="button" value="48" /> 
 
     <input type="button" value="49" /> 
 
    </div> 
 
    <input type="text" maxlength="5" value="50" /> 
 
    <div class="right"> 
 
     <input type="button" value="51" /> 
 
     <input type="button" value="52" /> 
 
     <input type="button" value="53" /> 
 
    </div> 
 
</div>

Answer 5

Można użyć właściwości CSS display z wartością flex w opakowaniu i mienia flex u dzieci.

Aby dowiedzieć się więcej na ten temat, sprawdź następujące zasoby: A Complete Guide to Flexbox

Oto przykład:

.wrapper { 
 
    display: flex; 
 
} 
 
.wrapper > div { 
 
    text-align: center; 
 
    flex: 1; 
 
    border: 1px solid #000; 
 
}

<div class="wrapper"> 
 

 
    <div> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    </div> 
 

 
    <div> 
 
    <button>3</button> 
 
    </div> 
 

 
    <div> 
 
    <button>4</button> 
 
    <button>5</button> 
 
    <button>6</button> 
 
    </div> 
 

 
</div>