CSS 3을 사용하여 세로로 정렬
CSS 3에서 블록 요소를 수직으로 정렬하는 방법이 있습니까? 예가 있습니까? 감사합니다.
최근에이 문제를 살펴보고 다음을 시도했습니다.
HTML :
<body>
<div id="my-div"></div>
</body>
CSS :
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
다음은 바이올린입니다.
고정 치수 대신 "너비 / 높이 : 자동"을 사용하는 경우에도 작동합니다. Firefox, Chrome 및 IE의 최신 버전에서 테스트되었습니다 (* gasp *).
참고 : 이 예에서는 Flexible Box Layout Module 의 초안 버전을 사용합니다 . 호환되지 않는 최신 사양 으로 대체되었습니다 .
box-align 및 box-pack 속성을 함께 사용하여 div 상자의 자식 요소를 중앙에 배치합니다.
예:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Flexbox 사용 :
.container {
display: flex;
/* Vertical align: */
align-items: center;
/* Horizontal align: */
justify-content: center;
}
jsFiddle : http://jsfiddle.net/maars/8Uyvf
브라우저 지원 : http://caniuse.com/flexbox
몇 가지 방법 :
1. 절대 위치-이 작업을 수행하려면 선언 된 높이가 있어야합니다.
<div>
<div class='center'>Hey</div>
</div>
div {height: 100%; width: 100%; position: relative}
div.center {
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
}
* 2. 디스플레이 사용 : 표 http://jsfiddle.net/B7CpL/2/ *
<div>
<img src="/img.png" />
<div class="text">text centered with image</div>
</div>
div {
display: table;
vertical-align: middle
}
div img,
div.text {
display: table-cell;
vertical-align: middle
}
- display : table을 사용한 더 자세한 튜토리얼
http://css-tricks.com/vertically-center-multi-lined-text/
CSS에서 div를 수직 및 수평으로 정렬하는 간단한 방법이 있습니다.
div에 높이를 입력하고이 스타일을 적용하세요.
.hv-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
이것이 도움이 되었기를 바랍니다.
나는 항상 이 기사의 튜토리얼을 사용하여 사물을 중심에 둡니다. 대단해
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
필수 규칙은 다음과 같습니다.
- 컨테이너를 상대적으로 위치 지정하여 절대 위치 요소의 컨테이너로 선언합니다.
- 요소 자체를 절대 위치에 둡니다.
- '상단 : 50 %'로 용기의 절반 아래에 놓습니다. (여기서 50 % '는 컨테이너 높이의 50 %를 의미합니다.)
- Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
Try this also work perfectly:
html:
<body>
<div id="my-div"></div>
</body>
css:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
display: table-cell;
vertical-align: middle
}
You can vertically align by setting an element to display: inline-block, then setting vertical-align: middle;
참고URL : https://stackoverflow.com/questions/5412912/align-vertically-using-css-3
'program story' 카테고리의 다른 글
| 현재 실행중인 DLL의 위치를 얻는 방법은 무엇입니까? (0) | 2020.10.26 |
|---|---|
| 편집 텍스트가 언제 편집되었는지 알기 (0) | 2020.10.26 |
| Select2 Ajax 방법이 선택되지 않음 (0) | 2020.10.26 |
| VBA의 생성자에 인수 전달 (0) | 2020.10.26 |
| Pandas를 사용하여 문자열 열의 각 값에 문자열 접두사 추가 (0) | 2020.10.26 |