이미지를 다음 <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/
testHeight여기 가 무엇입니까 ?
#test요소 의 높이 . 혼란을 드려 죄송합니다.
javascript, jQuery, AJAX등 때문에 다른 사람들이 이해할 수있는
에 추가 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에 배경색을 추가했습니다.
또한 가로 및 세로 중앙에 배치하려는 경우- 흐름 설계가 아닌 (이 경우 이전 솔루션이 적용됨) 다음을 수행 할 수 있습니다.
absolute또는relative 위치 (이것을 호출합니다 content).wrapper ).wrapperdiv .#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>이 바이올린을 참조하십시오 !