Jak wyrównać 3 div (lewy / środkowy / prawy) wewnątrz innego diva?

392

Chcę mieć 3 div wyrównane wewnątrz div kontenera, coś takiego:

[[LEFT]       [CENTER]        [RIGHT]]

Div kontenera ma szerokość 100% (bez ustawionej szerokości), a div div powinien pozostać w środku po zmianie rozmiaru kontenera.

Więc ustawiłem:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Ale staje się:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Jakieś wskazówki?

html css flexbox alignment css-float serg
źródło

1

Jeśli kontener stanie się węższy niż 300 pikseli, stanie się tak, chyba że ustawisz właściwość przepełnienia.

inkedmn

Flexbox, a także Grid: jsfiddle.net/w0s4xmc0/12963

Manoj Kumar

Uwaga - po prostu jak na @ komentarzu inkedmn'S, z gronem treści w każdej kolumnie nie mogłem dostać je wszystkie, aby wyrównać właściwie w każdej szerokości bez pojemnika overflow: hidden;na centerkolumnie. Następnie w zapytaniu o media dla małych urządzeń, gdy wszystkie 3 kolumny były wyśrodkowane na stronie jedna nad drugą, potrzebowałem overflow: hidden;w środkowym rzędzie (która była odpowiednią kolumną na dużych urządzeniach), inaczej nie miałaby wysokości i nie byłaby wyśrodkowana w pionie między górnym i dolnym rzędem.

Chris L

364

Za pomocą tego CSS umieść div tak (najpierw):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS Możesz także unosić się w prawo, potem w lewo, a następnie wyśrodkować. Ważne jest, aby pływaki znajdowały się przed „główną” sekcją środkową.

PPS Często chcesz ostatni w #containertym fragmencie: <div style="clear:both;"></div>który będzie rozciągał się #containerpionowo, aby zawierał obie boczne pływaki zamiast brać jego wysokość tylko #centeri prawdopodobnie pozwalając bokom wystawać z dna.

dkaminy
źródło

jak byś to zrobił, gdyby kontener nie był w 100%? Próbuję czegoś takiego tutaj, chciałbym, aby div pozostał na prawo od kontenera, ale płynie na prawo od strony

Tiago,

@Tiago: Pływaki powinny pozostać ograniczone do div, jeśli są w nim. Sprawdź, jaka jest szerokość pojemnika, ustawiając go na border:solid. Jeśli jest w 100%, umieść go w innym div, aby umieścić go na swojej stronie.

James P.,

Ponadto - jeśli wkładasz je do kontenera o zmiennym rozmiarze, upewnij się, że ustawiłeś minimalną szerokość kontenera, aby nie dopuścić do zepchnięcia div z pływającymi prawymi elementami.

Tapefreak,

6

Ta odpowiedź ma ponad sześć lat. W 2016 roku poprawną odpowiedzią jest flexbox.

1

@torazaburo, być może istnieje więcej niż jedna poprawna odpowiedź, istnieje wiele sposobów na osiągnięcie tego samego punktu, w tym przypadku muszę użyć tego rozwiązania, ponieważ używana przeze mnie struktura już ustawia lewą i prawą stronę z pływakiem do elementów, po prostu dodanie środkowego elementu na końcu jest dla mnie idealne.

Kodowanie Ninja,

128

Jeśli nie chcesz zmieniać struktury HTML, możesz to zrobić, dodając text-align: center;element otoki i display: inline-block;element środkowy.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Prezentacja na żywo: http://jsfiddle.net/CH9K8/

fruechtemuesli
źródło

1

Jest to jedyne rozwiązanie, które zmienia rozmiar odpowiednio do szerokości okna bez szybkiego składania.

Jared Sealey

2

Jest idealny, gdy lewy i prawy rozmiar są równe. W przeciwnym razie Centrum nie zostanie wyśrodkowane.

mortalis

126

Wyrównanie Three Divs w poziomie za pomocą Flexbox

Oto metoda CSS3 służąca do wyrównywania elementów div w poziomie wewnątrz innego elementu div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Rozwiń fragment kodu

jsFiddle

justify-contentNieruchomość zajmuje pięć wartości:

flex-start (domyślna)
flex-end
center
space-between
space-around

We wszystkich przypadkach trzy div są w tej samej linii. Opis każdej wartości można znaleźć na stronie : https://stackoverflow.com/a/33856609/3597276

Korzyści z Flexbox:

minimalny kod; bardzo wydajny
centrowanie, zarówno pionowo, jak i poziomo, jest proste i łatwe
kolumny o równej wysokości są proste i łatwe
wiele opcji wyrównywania elementów elastycznych
reaguje
w przeciwieństwie do pływaków i tabel, które oferują ograniczoną pojemność układu, ponieważ nigdy nie były przeznaczone do tworzenia układów, Flexbox jest nowoczesną techniką (CSS3) z szerokim zakresem opcji.

Aby dowiedzieć się więcej o Flexbox, odwiedź:

Metody wyrównywania elementów Flex
Korzystanie z elastycznych skrzynek CSS ~ MDN
Kompletny przewodnik po Flexbox ~ CSS-Tricks
Co to jest Flexbox ?! ~ Samouczek wideo na YouTube

Obsługa przeglądarek: Flexbox jest obsługiwany przez wszystkie główne przeglądarki, z wyjątkiem IE <10 . Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają prefiksów dostawców . Aby szybko dodać prefiksy, skorzystaj z Autoprefixera . Więcej szczegółów w tej odpowiedzi .

Michael Benjamin
źródło

7

Flex jest znacznie lepszy niż używanie pływaków.

Faizan Akram Dar

1

Świetne wyjaśnienie tutaj i w powiązanych postach! Drobna uwaga: używanie elementów „span” jako elementów elastycznych wewnątrz div kontenera działało w firefoxie, ale nie działało w przeglądarce opartej na javafx (webview). Zmiana „rozpiętości” na „div” działała w obu przypadkach.

Ashok,

Internet Explorer 10 i wcześniejsze wersje nie obsługują właściwości justify-content

D.Snap

1

To niestety działa tylko z przedmiotami o tej samej szerokości. Zobacz także stackoverflow.com/questions/32551291/…

obsłuż

Doskonale, wypróbowałem wszystkie rozwiązania tutaj i to jest najlepsze!

Nico Müller

22

Właściwość Float w rzeczywistości nie jest używana do wyrównywania tekstu.

Ta właściwość służy do dodawania elementu do prawej lub lewej lub do środka.

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

Rozwiń fragment kodu

na float:leftwyjście będzie[First][second][Third]

na float:rightwyjście będzie[Third][Second][First]

Oznacza to, że właściwość float => left doda następny element na lewo od poprzedniego, podobnie jak w przypadku prawa

Musisz również wziąć pod uwagę szerokość elementu nadrzędnego, jeśli suma szerokości elementów podrzędnych przekroczy szerokość elementu nadrzędnego, to następny element zostanie dodany w następnym wierszu

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

Rozwiń fragment kodu

[Pierwsza sekunda]

[Trzeci]

Musisz więc wziąć pod uwagę wszystkie te aspekty, aby uzyskać idealny wynik

Rajiv Pingale
źródło

13

Lubię moje paski mocno i dynamicznie. Dotyczy to CSS 3 i HTML 5

Po pierwsze, ustawienie opcji Szerokość na 100 pikseli jest ograniczające. Nie rób tego
Po drugie, ustawienie szerokości kontenera na 100% będzie działać dobrze, dopóki nie mówimy o tym, że jest to pasek nagłówka / stopki dla całej aplikacji, np. Pasek nawigacji lub pasek kredytów / praw autorskich. Użyj right: 0;zamiast tego dla tego scenariusza.
Używasz id przez (hash #container, #leftitp) zamiast klas ( .container, .leftitp), które jest w porządku, jeśli nie chcesz, aby powtórzyć swój wzorzec stylu gdzie indziej w kodzie. Zastanowiłbym się zamiast tego użyć klas.
W przypadku HTML nie trzeba zamieniać kolejności dla: lewej, środkowej i prawej. display: inline-block;naprawia to, zwracając kod do czegoś czystszego i logiczniejszego w kolejności.
Na koniec musisz wyczyścić wszystkie pływaki, aby nie zadzierały z przyszłością <div> . Robisz to za pomocąclear: both;

Podsumowując:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Punkt bonusowy, jeśli używasz HAML i SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

Eric Wanchic
źródło

12

Dostępnych jest kilka sztuczek do wyrównania elementów.

01. Korzystanie ze sztuczki stołowej

Pokaż fragment kodu

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Rozwiń fragment kodu

02. Korzystanie z Flex Trick

Pokaż fragment kodu

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Rozwiń fragment kodu

03. Korzystanie z Float Trick

Pokaż fragment kodu

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Rozwiń fragment kodu

Santosh Khalse
źródło

11

Można to łatwo zrobić za pomocą CSS3 Flexbox, funkcji, która będzie używana w przyszłości (Kiedy <IE9jest całkowicie martwy) przez prawie każdą przeglądarkę.

Sprawdź tabelę kompatybilności przeglądarki

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Wynik:

Pokaż fragment kodu

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Rozwiń fragment kodu

Manoj Kumar
źródło

4

Z twitterowym ładowaniem:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

Ka.
źródło

3

możliwa odpowiedź, jeśli chcesz zachować kolejność HTML i nie używać Flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Link do pióra kodowego

Pruthvi P
źródło

2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; zapewnia idealne wyrównanie środka.

JSFiddle Demo

Khalid Farhan
źródło

Wyśrodkowuje on div w twoim przykładzie, ponieważ elementy tekstowe mają prawie taki sam rozmiar, wydłuż jeden tekst, a #center div nie jest już w środku: jsfiddle.net/3a4Lx239

Kai Noack

1

Zrobiłem kolejną próbę uproszczenia tego i osiągnięcia tego bez konieczności posiadania kontenera.

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Możesz to zobaczyć na żywo w JSFiddle

użytkownik15100
źródło

1

Za pomocą Bootstrap 3 tworzę 3 divy o równej szerokości (w układzie 12 kolumn 4 kolumny dla każdego diva). W ten sposób możesz utrzymać centralną strefę w środku, nawet jeśli lewa / prawa sekcja mają różne szerokości (jeśli nie przepełniają przestrzeni kolumn).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Aby stworzyć tę strukturę bez bibliotek, skopiowałem niektóre reguły z Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

mortalis
źródło

0

Oto zmiany, które musiałem wprowadzić w zaakceptowanej odpowiedzi, gdy zrobiłem to z obrazem jako środkowym elementem:

Upewnij się, że obraz jest zawarty w div ( #centerw tym przypadku). Jeśli tak nie jest, to trzeba ustawić displaynablock , i wydaje się, że jest wyśrodkowany względem przestrzeni między pływającymi elementami.

Upewnij się, że ustawiłeś rozmiar obrazu i jego kontenera:

#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

Sam
źródło

0

Możesz spróbować:

Twój kod HTML taki jak ten:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

i twój kod css taki jak ten:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

więc wynik powinien wyglądać następująco:

[[LEFT]       [CENTER]        [RIGHT]]

Kishan Radadiya
źródło

-1

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

Shubham
źródło

2

Witamy w Stack Overflow! Dodaj wyjaśnienie, dlaczego ten kod pomaga OP. Pomoże to udzielić odpowiedzi, z której przyszli widzowie mogą się uczyć. Aby uzyskać więcej informacji, zobacz Jak odpowiedzieć .

Heretic Monkey

-3

Zrobiłeś to poprawnie, wystarczy wyczyścić pływaki. Po prostu dodaj

overflow: auto;

do twojej klasy kontenera.

Mustapha ZEGAOULA
źródło

-6

Najłatwiejszym rozwiązaniem jest utworzenie skrzynki z 3 kolumnami i wyśrodkowanie tej tabeli.

HTML:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

Sthembiso F. Makhathini
źródło

-10

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

bajty
źródło

2

Zamiast pisać tylko blok kodu, wyjaśnij, dlaczego ten kod rozwiązuje postawiony problem. Bez wyjaśnienia nie jest to odpowiedź.

Martijn Pieters

Jak wyrównać 3 div (lewy / środkowy / prawy) wewnątrz innego diva?

Odpowiedzi:

Wyrównanie Three Divs w poziomie za pomocą Flexbox

jsFiddle