CSS merkezi ekran içi satır bloğu?

Burada bir çalışma kodum var: http://jsfiddle.net/WVm5d/ (hizalama merkez efektini görmek için sonuç penceresini büyütmeniz gerekebilir)

Soru

Kod iyi çalışıyor ama sahip olmak istemiyorum display: table;. Sarma sınıfı hizalama merkezini yapmanın tek yolu bu. Bir kullanmak için bir yol olsaydı daha iyi olurdu düşünmek display: block;ya display: inline-block;. Hizalama merkezini başka bir şekilde çözmek mümkün müdür?

Konteynere bir sabit eklemek benim için bir seçenek değil.

Gelecekte JS Fiddle bağlantısı koparsa da kodumu buraya yapıştıracağım:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

display: inline-block% 100 genişlikli bir ebeveyn içinde hem yatay hem de dikey olarak ortalanacak bir alt öğeye ihtiyacım olduğu için kabul edilen çözüm benim için işe yaramayacaktı .

Öğeleri yatay ve dikey olarak ortalamanızı sağlayan Flexbox'ları justify-contentve align-itemsözelliklerini kullandım . Her ikisini centerde ebeveyne ayarlayarak , alt öğe (hatta birden çok öğe!) Tam ortada olur.

Bu çözüm, düğmemdeki metin değişeceğinden benim için uygun olmayan sabit genişlik gerektirmez.

İşte bir CodePen demosu ve aşağıdaki ilgili kodun bir pasajı:

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

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Bunu dene. text-align: centerVücuda ve display:inline-blocksarmaya ekledim ve sonradisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

İçinde bir <div>olan varsa text-align:center;, içindeki herhangi bir metin o kap öğesinin genişliğine göre ortalanır. inline-blockelemanlar bu amaç için metin olarak ele alınır, böylece ortalanırlar.

Bunu konumlandırma ile yapabilir, üst div değerini göreceli olarak ve alt div değerini mutlak olarak ayarlayabilirsiniz.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

"Display: table" kullanmanıza gerek yoktur. Kenar boşluğunuzun: 0 otomatik merkezleme girişiminin çalışmamasının nedeni, bir genişlik belirtmemenizdir.

Bu iyi çalışır:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

Bu div varsayılan olarak engelleneceğinden display: block belirtmeniz gerekmez. Ayrıca taşmayı da kaybedebilirsiniz: gizli.

@ Vijayscode'un cevabına benzer şekilde, bu, bir satır içi blok öğesini yatay olarak ortalar (ancak üst öğesinin stillerini de değiştirmeye gerek kalmadan):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Sadece 2 parametreyi değiştirdim:

.wrap {
    display: block;
    width:661px;
}

Canlı Demo

Benim için en iyisini bulduğum harika makale, boyuta% eklemekti

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Sadece kullan:

line-height:50px

"50px" değerini div ile aynı yükseklikte değiştirin.