CSS 센터 디스플레이 인라인 블록?

여기에 작동 코드가 있습니다 : http://jsfiddle.net/WVm5d/ (정렬 중심 효과를 보려면 결과 창을 더 크게 만들어야 할 수도 있습니다)

질문

코드는 정상적으로 작동하지만을 좋아하지 않습니다 display: table;. 랩 클래스 정렬 센터를 만들 수있는 유일한 방법입니다. display: block;또는 사용 방법이 있으면 더 좋을 것이라고 생각합니다 display: inline-block;. 정렬 센터를 다른 방법으로 해결할 수 있습니까?

컨테이너에 고정을 추가하는 것은 옵션이 아닙니다.

JS Fiddle 링크가 나중에 끊어지면 여기에 코드를 붙여 넣을 것입니다.

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-block100 % 너비 부모 내에서 가로 및 세로 중앙에 자식 요소가 있어야하기 때문에 허용 된 솔루션이 작동하지 않습니다 .

Flexbox justify-content및 align-items속성을 사용하여 각각 가로 및 세로 요소를 가운데에 맞출 수 있습니다. 둘 다 center부모 로 설정 하면 자식 요소 (또는 여러 요소!)가 완벽하게 가운데에 있습니다.

이 솔루션에는 고정 너비가 필요하지 않으므로 버튼의 텍스트가 변경되므로 적합하지 않습니다.

다음은 CodePen 데모 와 아래 관련 코드의 스 니펫입니다.

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

.child {
  display: inline-block;
}

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

이 시도. 나는 text-align: center몸에 추가 하고 display:inline-block포장 한 다음display: table

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

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

<div>with 가 있으면 text-align:center;내부의 모든 텍스트가 해당 컨테이너 요소의 너비를 기준으로 중앙에 배치됩니다. inline-block요소는이 목적을 위해 텍스트로 취급되므로 가운데에 배치됩니다.

위치 지정을 사용 하여이 작업을 수행 할 수 있으며 부모 div를 상대로 설정하고 자식 div를 절대로 설정하십시오.

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

"display : table"을 사용할 필요는 없습니다. 여백 : 0 자동 센터링 시도가 작동하지 않는 이유는 너비를 지정하지 않았기 때문입니다.

이것은 잘 작동합니다 :

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

div가 기본적으로 차단되므로 display : block을 지정할 필요가 없습니다. 오버플로를 잃을 수도 있습니다. 숨겨진.

@vijayscode의 답변과 유사하게 인라인 블록 요소를 가로로 가운데에 배치합니다 (그러나 부모 스타일도 수정할 필요가 없습니다).

  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

방금 2 개의 매개 변수를 변경했습니다.

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

라이브 데모

내가 찾은 가장 좋은 기사는 크기에 %를 추가하는 것이 었습니다

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

그냥 사용하십시오 :

line-height:50px

"50px"를 div와 같은 높이로 바꿉니다.