Blok CSS wyświetla wbudowany blok?

Mam działający kod tutaj: http://jsfiddle.net/WVm5d/ (może być konieczne powiększenie okna wyników, aby zobaczyć efekt wyrównania do środka)

Pytanie

Kod działa dobrze, ale nie lubię go mieć display: table;. To jedyny sposób, aby uczynić centrum wyrównania klasy zawijania. Myślę, że byłoby lepiej, gdyby istniał sposób użycia display: block;lub display: inline-block;. Czy można rozwiązać centrum wyrównywania w inny sposób?

Dodanie stałej z do kontenera nie jest dla mnie opcją.

Wkleję też tutaj swój kod, jeśli łącze JS Fiddle zostanie zerwane w przyszłości:

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>

Zaakceptowane rozwiązanie nie działałoby dla mnie, ponieważ potrzebuję elementu potomnego, który display: inline-blockpowinien być wyśrodkowany zarówno w poziomie, jak i w pionie w rodzicu o szerokości 100%.

Użyłem Flexboksa justify-contenti align-itemswłaściwości, które odpowiednio pozwalają wyśrodkować elementy poziomo i pionowo. Ustawiając oba elementy centerna obiekcie nadrzędnym, element potomny (lub nawet wiele elementów!) Będzie idealnie na środku.

To rozwiązanie nie wymaga stałej szerokości, co byłoby dla mnie nieodpowiednie, ponieważ tekst mojego przycisku zmieni się.

Oto demo CodePen i fragment odpowiedniego kodu poniżej:

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

.child {
  display: inline-block;
}

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

Spróbuj tego. Dodałem text-align: centerdo ciała i display:inline-blockowinąć, a następnie usunąłem twojedisplay: table

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

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

Jeśli masz znak „ <div>a” text-align:center;, tekst w środku będzie wyśrodkowany względem szerokości tego elementu kontenera. inline-blockelementy są w tym celu traktowane jak tekst, więc zostaną również wyśrodkowane.

Możesz to również zrobić z pozycjonowaniem, ustawić div rodzica na względny i div dziecka na absolutny.

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

Nie musisz używać „display: table”. Powodem, dla którego twoja próba automatycznego wyśrodkowania marginesu 0 nie działa, jest to, że nie podałeś szerokości.

To będzie działać dobrze:

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

Nie musisz określać display: block, ponieważ ten div będzie domyślnie blokowany. Prawdopodobnie możesz także utracić przepełnienie: ukryte.

Podobnie jak w przypadku odpowiedzi @ vijayscode, poziomo wyśrodkuje on element wbudowanego bloku (ale bez konieczności modyfikowania stylów jego rodzica):

  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

Właśnie zmieniłem 2 parametry:

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

Demo na żywo

Świetnym artykułem, który okazał się dla mnie najlepszy, było dodanie% do rozmiaru

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

Po prostu użyj:

line-height:50px

Zamień „50px” na tę samą wysokość co div.