[css] div의 중심에 가로 및 세로로 테이블을 배치하는 방법

Program / 글쓴이

이미지를 다음 <div>과 같은 배경 이미지로 설정할 수 있습니다 .

<style>
    #test {

        background-image: url(./images/grad.gif);
        background-repeat: no-repeat;
        background-position: center center;

        width:80%;
        margin-left:10%;
        height:200px;
        background-color:blue;

    }

</style>

<div id="test"></div>

<div>수평 및 수직 중심에 테이블을 설정해야합니다 . 를 사용하는 크로스 브라우저 솔루션이 CSS있습니까?

답변

센터링은 CSS에서 가장 큰 문제 중 하나입니다. 그러나 몇 가지 트릭이 있습니다.

테이블을 가로로 가운데에 맞추려면 왼쪽 및 오른쪽 여백을 자동으로 설정할 수 있습니다.

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

세로로 가운데에 맞추려면 유일한 방법은 javascript를 사용하는 것입니다.

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

아니오 vertical-align:middle테이블이 아닌 블록 인라인 요소이기 때문에 가능하다.

편집하다

CSS 센터링 솔루션을 요약 한 웹 사이트는 다음과 같습니다. http://howtocenterincss.com/

답변

나를 위해 일한 것은 다음과 같습니다.

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

그리고 이것은 수직 및 수평으로 정렬되었습니다.

답변

가로로 가운데에 위치 시키려면 말할 수 있습니다 width: 50%; margin: auto;. 내가 아는 한, 크로스 브라우저입니다. 수직 정렬의 경우을 시도 할 수 vertical-align:middle;있지만 텍스트와 관련하여 만 작동 할 수 있습니다. 시도해 볼 가치가 있습니다.

답변

에 추가 margin: 0 auto;하십시오 table. 속성을 추가 할 필요가 없습니다div

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

스 니펫 확장

참고 : 테이블의 중앙에 정렬하는 것을 시각화하기 위해 div에 배경색을 추가했습니다.

답변

또한 가로 및 세로 중앙에 배치하려는 경우- 흐름 설계가 아닌 (이 경우 이전 솔루션이 적용됨) 다음을 수행 할 수 있습니다.

  1. 기본 div를 absolute또는relative 위치 (이것을 호출합니다 content).
  2. 실제로 테이블을 보유 할 내부 div를 선언하십시오. wrapper ).
  3. 내부에 테이블 자체를 선언하십시오. wrapperdiv .
  4. 랩퍼 오브젝트의 “등록 포인트”를 중심으로 변경하려면 CSS 변환을 적용하십시오.
  5. 랩퍼 오브젝트를 상위 오브젝트의 중심으로 이동하십시오.
#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }
<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

스 니펫 확장

참고 :이 스타일은 테이블에서 직접 작동하지 않기 때문에 래퍼 div를 제거 할 수 없으므로 div를 사용하여 래핑하고 배치하는 동안 테이블이 div 내부로 흐릅니다.

답변

다음 기술을 사용하여 상자를 세로 및 가로로 가운데에 맞출 수 있습니다.

외부 컨테이너 :

  • 있어야한다 display: table;

내부 컨테이너 :

  • 있어야한다 display: table-cell;
  • 있어야한다 vertical-align: middle;
  • 있어야한다 text-align: center;

내용 상자 :

  • 있어야한다 display: inline-block;

이 기술을 사용하는 경우 표와 함께 다른 내용과 함께 표를 내용 상자에 추가하십시오.

데모 :

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

스 니펫 확장

이 바이올린을 참조하십시오 !

답변

나는 내가 포함해야한다는 것을 발견했다

body { width:100%; }

“여백 : 0 자동”은 테이블에서 작동합니다.