3 div (sol / orta / sağ) başka bir div içinde nasıl hizalanır?

392

Ben bir konteyner div, böyle bir şey içinde hizalanmış 3 div istiyorum:

[[LEFT]       [CENTER]        [RIGHT]]

Kapsayıcı bölmesi% 100 genişliğindedir (ayarlı genişlik yok) ve kapsayıcı yeniden boyutlandırıldıktan sonra orta bölme ortada kalmalıdır.

Ben de ayarladım:

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

Ama olur:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Herhangi bir ipucu?

html  css  flexbox  alignment  css-float 
— serg
kaynak
1
Kap 300 piksel genişlikten daha dar hale gelirse, taşma özelliğini ayarlamadığınız sürece bu gerçekleşir.
— inkedmn
Flexbox ve ayrıca Izgara: jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
Sadece nota - Her sütunda içeriğinin bir grup ile inkedmn yorumuna @ uyarınca, ben hepsini olmadan herhangi konteyner genişlikte düzgün hizalamak için alamadım overflow: hidden;üzerinde centersütunda. Daha sonra, 3 sütunun tamamını sayfada üst üste koyduğumda küçük cihazlar için medya sorgusunda overflow: hidden;, orta sıraya (büyük cihazlarda sağ sütun olan) ihtiyacım vardı, aksi takdirde yüksekliği yoktu ve dikey olarak ortalanmadı üst ve alt sıra arasında.
— Chris L

Yanıtlar:

364

Bu CSS ile div'lerinizi böyle koyun (önce yüzer):

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

PS Ayrıca sağa, sonra sola, sonra merkeze de yüzebilirsiniz. Önemli olan şamandıraların "ana" orta bölümden önce gelmesidir.

PPS#container Bu snippet'in içinde sık sık kalmasını istersiniz : yalnızca yüksekliğini almak ve muhtemelen yanların alttan dışarı çıkmasına izin vermek yerine her iki yan şamandırayı içerecek şekilde dikey olarak <div style="clear:both;"></div>uzanır .#container#center

— dkamins
kaynak
konteyner% 100 olmasaydı nasıl yapardın? Burada böyle bir şey deniyorum, div kabın sağında kalmak istiyorum, ama sayfanın sağında yüzen
— Tiago
@Tiago: Şamandıralar, içerideyse div ile sınırlı kalmalıdır. Konteynerin genişliğini ayarlayarak kontrol edin border:solid. % 100 ise, sayfanızın içine yerleştirmek için başka bir div içine yerleştirin.
— James P.
Ayrıca - Bunları yeniden boyutlandırılabilir bir kaba koyuyorsanız, sağ taraftaki div'in aşağı itilmesini önlemek için kabın minimum genişliğini ayarladığınızdan emin olun.
— Tapefreak
6
Bu cevap altı yıldan daha eski. 2016 yılında doğru cevap flexbox.
1
@torazaburo, belki de birden fazla doğru cevap var, aynı noktaya ulaşmanın birçok yolu var, bu durumda, bu çözümü kullanmalıyım çünkü kullandığım bir çerçeve, öğelere kayan şekilde zaten sola ve sağa ayarlıyor, sadece sonunda merkez elemanı eklemek benim için mükemmel.
— Ninja Kodlama
128

HTML yapınızı değiştirmek istemiyorsanız text-align: center;, sarma öğesine ve display: inline-block;ortalanmış öğeye a ekleyerek de yapabilirsiniz .

#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;
}

Canlı Demo: http://jsfiddle.net/CH9K8/

— fruechtemuesli
kaynak
1
Bu, çok erken katlanmadan pencere genişliği ile doğru şekilde yeniden boyutlandırılan tek çözümdür.
— Jared Sealey
2
Sol ve Sağ boyutlar eşit olduğunda mükemmeldir. Aksi takdirde Merkez ortalanmaz.
— mortalis
127

Flexbox Kullanarak Üç Div'i Yatay Olarak Hizalama

Div'leri başka bir div içinde yatay olarak hizalamak için bir CSS3 yöntemi.

#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>
Snippet'i genişlet

jsFiddle

justify-contentMülkiyet beş değerleri alır:

  • flex-start (varsayılan)
  • flex-end
  • center
  • space-between
  • space-around

Her durumda, üç div aynı çizgidedir. Her bir değerin açıklaması için bkz. Https://stackoverflow.com/a/33856609/3597276

Flexbox'ın avantajları:

  1. minimal kod; çok verimli
  2. hem dikey hem de yatay olarak merkezleme basit ve kolaydır
  3. eşit yükseklik sütunları basit ve kolaydır
  4. esnek elemanları hizalamak için birden fazla seçenek
  5. duyarlı
  6. Asla mizanpaj oluşturmak için tasarlanmadığı için sınırlı mizanpaj kapasitesi sunan şamandıra ve masaların aksine, flexbox geniş bir seçenek yelpazesine sahip modern (CSS3) bir tekniktir.

Flexbox ziyareti hakkında daha fazla bilgi edinmek için:

Tarayıcı desteği: Flexbox, IE <10 dışındaki tüm büyük tarayıcılar tarafından desteklenir . Safari 8 ve IE10 gibi bazı yeni tarayıcı sürümleri satıcı önekleri gerektirir . Ön ek eklemenin hızlı bir yolu için Autoprefixer kullanın . Bu cevapta daha fazla ayrıntı .

— Michael Benjamin
kaynak
7
Flex, şamandıra kullanmaktan çok daha iyidir.
— Faizan Akram Dar
1
Burada ve bağlantılı yazılarda büyük açıklama! Bir sidenote: "div" öğelerini container div içindeki flex öğeleri olarak kullanmak firefox'ta çalıştı, ancak javafx tabanlı bir tarayıcıda (web görünümü) çalışmadı. "Açıklıklar" ı "div" olarak değiştirmek her ikisinde de çalıştı.
— Ashok
Internet Explorer 10 ve önceki sürümleri justify-content özelliğini desteklemez
— D.Snap
1
Bu maalesef sadece aynı genişlikte öğelerle çalışıyor. Ayrıca bkz stackoverflow.com/questions/32551291/...
— kolu
Mükemmel, burada tüm çözümleri denedim ve bu en iyisi!
— Nico Müller
22

Float özelliği aslında metni hizalamak için kullanılmaz.

Bu özellik, sağa veya sola veya ortaya öğe eklemek için kullanılır. 

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>
Snippet'i genişlet

için float:leftçıkış olacak[First][second][Third]

için float:rightçıkış olacak[Third][Second][First]

Bu, float => left özelliğinin bir sonraki öğenizi bir öncekinin soluna ekleyeceği, Sağ ile aynı durum

Ayrıca, alt öğelerin genişliklerinin toplamı üst öğenin genişliğini aşarsa, üst öğenin genişliğini göz önünde bulundurmanız gerekir, bu durumda sonraki satır sonraki satıra eklenir

 <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>
Snippet'i genişlet

[Birinci, ikinci]

[Üçüncü]

Mükemmel sonucu elde etmek için tüm bu özellikleri göz önünde bulundurmanız gerekir

— Rajiv Pingale
kaynak
13

Barlarımın sıkı ve dinamik olmasını seviyorum. Bu CSS 3 ve HTML 5 içindir

  1. İlk olarak, Genişliğin 100 piksele ayarlanması sınırlıdır. Yapma.

  2. İkincisi, kabın genişliğini% 100 olarak ayarlamak, bir navigasyon veya kredi / telif hakkı çubuğu gibi tüm uygulama için bir üstbilgi / altbilgi çubuğu olarak bahsedilinceye kadar düzgün çalışacaktır. right: 0;Bunun yerine bu senaryo için kullanın .

  3. Sen kimliğinin (karma kullanıyor #container, #leftyerine sınıfların (bir, vs) .container, .leftkodunuzda başka bir yerde tarzı desen tekrarlamak istiyorum sürece, gayet vs.). Bunun yerine sınıf kullanmayı düşünürdüm.

  4. HTML için sıra, sol, orta ve sağ için yer değiştirmenize gerek yoktur. display: inline-block;bunu düzelterek kodunuzu daha temiz ve mantıklı bir şekilde tekrar sıraya döndürür.

  5. Son olarak, geleceği karıştırmamak için şamandıraları temizlemeniz gerekir <div>. Bunu ileclear: both;

Özetlemek:

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; }

HAML ve SASS kullanıyorsanız bonus puanı;)

HAML:

.container
  .left
  .center
  .right
  .clear

SUKDÖ'nün:

.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
kaynak
12

Elemanları hizalamak için birkaç püf noktası vardır.

01. Tablo Hile Kullanımı

Kod snippet'ini göster

02. Flex Trick Kullanımı

Kod snippet'ini göster

03. Float Trick Kullanımı

Kod snippet'ini göster

— Santosh Khalse
kaynak
11

Bu, <IE9hemen hemen her tarayıcı tarafından gelecekte ( tamamen öldüğünde) kullanılacak bir özellik olan CSS3 Flexbox kullanılarak kolayca yapılabilir .

Tarayıcı Uyumluluk Tablosunu Kontrol Edin

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 */
}

Çıktı:

Kod snippet'ini göster

— Manoj Kumar
kaynak
4

Twitter bootstrap ile: 

<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.
kaynak
3

olası cevap, html sırasını korumak ve flex kullanmak istemiyorsanız.

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%);
}

Kod Kalemi Bağlantısı

— Pruthvi P
kaynak
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; mükemmel merkez hizalaması sağlar.

JSFiddle Demosu

— Halid Farhan
kaynak
Metin öğelerinde neredeyse aynı boyutta olduğu, bir metni daha uzun hale getirdiği ve #center div artık merkezde olmadığı için div örneğinizde ortalanır
— Kai Noack
1

Bunu basitleştirmek ve bir konteynere gerek kalmadan elde etmek için başka bir girişimde bulundum.

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;
}

JSFiddle'da canlı olarak görebilirsiniz.

— user15100
kaynak
1

Bootstrap 3'ü kullanarak eşit genişlikte 3 div oluşturuyorum (her div için 12 sütun düzeninde 4 sütun). Bu şekilde, sol / sağ bölümler farklı genişliklere sahip olsalar bile (sütunlarının boşluğunu geçmezlerse) merkezi bölgenizi ortada tutabilirsiniz.

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

Bu yapıyı kütüphanesiz oluşturmak için Bootstrap CSS'den bazı kuralları kopyaladım.

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
kaynak
0

Orta öğe olarak bir görüntü ile bunu yaptığımda kabul edilen cevapta yapmak zorunda olduğum değişiklikler şunlardır :

  1. Görüntünün bir div içinde olduğundan emin olun ( #centerbu durumda). Değilse, ayarlamak gerekecek displayiçinblock ve kayan elemanlar arasındaki boşluğa göre ortalanmış gibi görünür.

  2. Hem görüntünün hem de kabının boyutunu ayarladığınızdan emin olun :

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— Sam
kaynak
0

Bunu deneyebilirsiniz:

Html kodunuz şöyle:

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

ve css kodunuz şöyle:

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

yani, çıktısı şöyle olmalıdır:

[[LEFT]       [CENTER]        [RIGHT]]
— kishan Radadiya
kaynak
-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
kaynak
2
Stack Overflow'a hoş geldiniz! Lütfen bu kodun OP'ye neden yardımcı olduğuna dair biraz açıklama ekleyin. Bu, gelecekteki görüntüleyenlerin öğrenebilecekleri bir yanıt sağlamaya yardımcı olacaktır. Daha fazla bilgi için Nasıl Yanıt Verilir konusuna bakın .
— Heretic Maymun
-3

Doğru yaptın, sadece şamandıralarını temizlemelisin. Basitçe ekleyin 

overflow: auto;

konteyner sınıfınıza.

— Mustapha ZEGAOULA
kaynak
-6

En kolay çözüm, bir tabloyu 3 sütunlu sandıklamak ve o tabloyu ortalamaktır.

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
kaynak
-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 }
— bayt
kaynak
2
Lütfen yalnızca bir kod bloğu göndermek yerine, bu kodun neden ortaya çıkan sorunu çözdüğünü açıklayın . Bir açıklama olmadan, bu bir cevap değildir.
— Martijn Pieters
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.