İç `divs 'yatay olarak hizalama

Yatay olarak (ve tercihen dikey olarak) üç iç divs hizalamak için arıyorum. margin: 0 auto;'un vbox sınıfına uygulanması, hile yapmalıdır, ancak aşağıdaki minimum kodda olduğu gibi, hizalamayı hiç etkilemez. Bu hizalamayı nasıl yapabilirim?İç `divs 'yatay olarak hizalama

HTML:

<body> 
    <div id='site'> 
    <div class='main'> 
     <div class='vbox'> 
     <div id='inner1'>inner1</div> 
     <div id='inner2'>inner2</div> 
     <div id='inner3'>inner3</div> 
     </div> 
    </div> 
    </div> 
</body>

CSS: Sonuç this keman görülebilir

#site { 
    width: 100%; 
    height: 100%; 
} 

#main {} 

.vbox { 
    margin: 0 auto; 
}

kaynak

2016-03-28 nluigi

için Vbox için genişlik tanımlamak gerekir:

.vbox { 
    margin: 0 auto; 
    width: 30%;/*apply as your own*/ 
}

100% geniş elemanı yatay merkezli ama metin için bir hizalama bkz. Bunun için text-align: center;

kaynak

2016-03-28 09:57:07

uygulamalıdır Bunu yapabilirsiniz:

HTML

<body> 
    <div id='site'> 
    <div class='main'> 
     <div class='vbox'> 
     <div class='inner'>inner1</div> 
     <div class='inner'>inner2</div> 
     <div class='inner'>inner3</div> 
     </div> 
    </div> 
    </div> 
</body>

CSS

#main { 
    width: 100%; 
} 

.vbox { 
    width: 500px; 
    margin: 0 auto; 
    text-align: center; 
} 

.inner { 
    display: inline-block; 
    margin: 0 4px; 
}

kaynak

2016-03-28 10:00:47 aphextwix

Sadece .vbox için display: table; yatay merkezi haline geleceği verir.

.vbox { 
    margin: 0 auto; 
    display: table; 
}

Working Fiddle

başka çözüm display: flex;

.main { 
    display: flex; 
}

Fiddle

kaynak

2016-03-28 10:04:02 ketan

Sen ekranı kullanabilirsiniz: İçinizdeki divlere için inline-block:

.vbox { 
    text-align: center; 
    font-size: 0; /* white spaces fix */ 
} 

.vbox > div { 
    font-size: 1rem; /* white spaces fix */ 
    display: inline-block; 
}

Example

kaynak

2016-03-28 10:07:11 oboshto

önemli bit div varsayılan davranış kendi üst tam genişliğinde almaya olmasıdır bu

#site { 
    width: 100%; 
    height: 100%; 
} 

#main { 
    Width:100%; 
} 

.vbox { 
    margin: 0 auto; 
    padding:0; 
} 
.vbox div{ 
    width:32%; 
    display:inline-block; 
    padding:0; 
    margin:0; 
    box-sizing:border-box; 
}

gibi bir şey deneyin. Bunu değiştirmek için ekran içi satır içi bloğu verirsiniz.

kaynak

2016-03-28 10:09:04

Sen kullanarak dikey 3 div'leri hizalamak için bu yapabilirdi:

#site { 
    width: 100%; 
    height: 100%; 
} 

#main {} 

.vbox { 
    margin: 0 auto; 
} 

.vbox div{ 
    width: 30%; 
    float: left; 
}

daha div'leri veya daha az varsa, sadece buna göre genişliği güncelleyin.

kaynak

2016-03-28 11:05:39 Gautam

İç `divs 'yatay olarak hizalama

cevap

İlgili konular