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

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>

이거 먹어봐요.추가했습니다.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;
}

수용된 해결책은 제게 효과가 없을 것입니다. 왜냐하면 저는 다음과 같은 하위 요소가 필요하기 때문입니다.display: inline-block100% 너비의 부모에서 수평 및 수직으로 모두 중앙에 있어야 합니다.

플렉스박스를 사용했습니다.justify-content그리고.align-items요소의 중심을 수평과 수직으로 각각 잡을 수 있는 특성입니다.둘 다 다음으로 설정합니다.center부모에서 자식 요소(또는 여러 요소!)는 완벽하게 가운데에 있습니다.

이 솔루션은 고정된 너비가 필요하지 않아 버튼의 텍스트가 바뀌기 때문에 저에게는 적합하지 않을 것입니다.

다음은 CodePen 데모와 관련 코드의 일부분입니다.

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

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

만약 당신이.<div>와 함께text-align:center;, 그러면 그 안에 있는 텍스트는 해당 컨테이너 요소의 너비를 기준으로 가운데에 놓이게 됩니다.inline-block요소는 이 목적을 위해 텍스트로 취급되므로 중심에 놓이게 됩니다.

이렇게 하면 상위 요소의 스타일을 수정할 필요 없이 인라인 블록 요소의 가운데를 수평으로 맞춥니다.

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

이 작업은 포지셔닝을 사용하여 부모 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을 지정할 필요가 없습니다.오버플로(숨김)를 잃을 수도 있습니다.

방금 2개의 파라미터를 변경했습니다.

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

라이브 데모

좋은 기사입니다. 저에게 가장 효과적인 것은 사이즈에 %를 추가하는 것이었습니다.

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

사용만 하면 됩니다.

line-height:50px

"50px"를 디브와 같은 높이로 교체합니다.

언급URL : https://stackoverflow.com/questions/4980525/css-center-display-inline-block