CSS 제작 수평/수직 가운데 정렬 정보
1. 수평 가운데:
1.margin:0 auto
이런 방법은 주로margin:0 auto와 원소의width를 결합하여 수평 가운데의 효과를 실현한다.이 방법을 사용하여 원소의 수평 중심을 실현하려면 반드시 원소가 두 가지 조건을 만족시켜야 한다. 첫째, 원소는 고정된 너비 값이 있어야 한다.두 번째 원소의margin-left와margin-right는 모두 auto로 설정해야 한다. 이 두 가지 조건은 어느 것도 원소를 수평으로 가운데에 놓을 수 없는 효과가 없다.
div{
width:400px;
margin:0 auto;
}이 방법은 수평 가운데를 사용하고 모든 브라우저의 실행을 지원하며 모두가 비교적 많이 사용할 뿐만 아니라 가장 자주 사용하고 가장 효과적인 방법이기도 하다.
2.text-align:center
이런 방법은 주로 단행 텍스트가 가운데에 있거나table 형식이 가운데에 있고 주로text-align:center를 이용하여 원소를 수평으로 가운데에 놓는다.
body{text-align: center;이 방법text-align에는 세 가지 속성 값이 있습니다:left|center|right, 각각 왼쪽으로 정렬, 가운데로 정렬, 오른쪽으로 정렬, 비교적 자주 사용되고 추천합니다.
3.
html4에서 이미 탈락한center 라벨은 수평으로 가운데로 정렬할 수 있으나 사용을 권장하지 않습니다.
4.position 포지셔닝
포지셔닝도 자주 사용하는데 여기서도 포지셔닝의 방법으로 수평 중심을 실현할 수 있다.
body{
position:absolute;
left:50%;
}포지셔닝 퀴즈를 사용하는 것은 자주 사용하지만 사용 과정에서 편이값을 계산해야만 수평 퀴즈를 정확하게 실현할 수 있다.
5.margin/padding
이 방법은div 블록의 수평 가운데에 대한 조정입니다:margin과padding. 적당한 위치를 사용하면 수평 가운데에 대한 효과를 실현할 수 있습니다.
6.display:inline-block
디스플레이: inline-block을 사용하여 수평 중심을 잡는 것도 효과가 있지만, 이것을 사용하려면 부모 요소에text-align을 설정해야 합니다.
body{
text-align:center;
}
.content{
display:inline-block;
}7.css3에서 제공하는 탄성 박스 모형
신축성 박스 모형은 css3에 새로 도입된 박스 모형으로 브라우저 창에 적응하는 유동 레이아웃이나 글씨체 크기에 적응하는 신축성 레이아웃을 쉽게 만들 수 있다. 그 실현 원리에 대해 다음 코드를 통해 알 수 있다. 신축성 박스 모형을 터치하려면 디스플레이:box,'box-orient'가 분포하는 좌표축을 정의한다:vertical(수직분포)와horizional(수평분포). 기본적으로 상자는 탄력이 없다. 만약box-flex의 속성 값이 최소한 1일 경우 탄력이 풍부해진다.만약 상자가 탄력이 없다면, 가능한 한 넓이로 내용을 볼 수 있고, 넘침이 없으며, 크기는'width'와'height'에 의해 결정된다. (또는min-height,min-width,max-width,max-height)
<style type="text/css">
body{
display: box;
box-orient: horizontal;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 1;
}
</style>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>8.마이너스 외부 여백 (margin-left:-(width/2)px)
음외변거리 역시 수평 중심에 있는 문제를 해결할 수 있으나 절대적인 포지셔닝(position:absolute;)을 사용해야 한다.
.divr{backgrond-color: #000;position: absolute;left: 50%;width: 1000px;margin-left: -500px;}9.css3의fit-content
fit-content는 CS3에서width 속성에 새로 추가된 속성 값으로margin과 결합하면 수평 가운데의 효과를 쉽게 실현할 수 있습니다.
<style type="text/css">
.page ul {
width: -moz-fit-content;width:-webkit-fit-content;
width: fit-content;margin-left: auto;
.page li {
line-height: 25px;margin: 0 5px;float: left;
}
.page a {
display: block;color: #f2f2f2;
text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.page a:hover {
text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<div class="page">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>10.css3의 flex
CSS3의 flex는 강력한 기능으로 우리의 레이아웃을 더욱 유연하고 편리하게 할 수 있으며 실현이 상당히 편리하고 확장성이 강하다. 유일한 단점은 현재 브라우저의 호환성이 약하다는 것이다.
<style type="text/css">
.page {
display: -webkit-box;
-webkit-box-orient: horizontal;-webkit-box-pack: center;display: -moz-box;
-moz-box-orient: horizontal;-moz-box-pack: center;
display: -o-box;-o-box-orient: horizontal;
-o-box-pack: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;
display: box;box-orient: horizontal;box-pack: center;
}
.page li {
line-height: 25px;margin: 0 5px;float: left;
}
.page a {
display: block;color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.page a:hover {
text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<div class="page">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>2. 수직 가운데:
1.line-height 행 높이
이 메서드는 수직 가운데 맞춤이 가능하지만 단일 텍스트 가운데 맞춤만 가능합니다(모든 브라우저에 적용).
.content{
height:100px;
line-height:100px;
}2.position 포지셔닝
이 방법은 수평 가운데와 마찬가지로 수직 가운데도 위치를 정하는 방법을 사용할 수 있지만 충분한 공간이 없을 때 원소가 사라지는 단점이 있다.
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}또는
.content{
position:absolute;
top:50%;
}3. 플로트 부동
물론 우리는 flaot 부동을 설정하여 수직 극의 중간에 있는 효과를 얻을 수 있다. 부동에 대해서는 나중에 제거하고 중간에 표시해야 한다.
.content{
float:left;
height:50%;
margin-bottom:-120px;
}
.footer{
clear:both;
height:240px;
position:relative;
}4.vertical-align: middle
vertical-align 속성은 인라인 요소의 베이스라인을 해당 요소가 인라인에 수직으로 정렬하도록 정의합니다.이 메서드는 임의로 요소 높이를 변경할 수 있지만 IE8에서는 유효하지 않습니다.
.content{
display:table-cell;
vertical-align:middle;
}위에서 주로 여러 가지 방법을 수집하여 원소가 수직으로 가운데를 차지하도록 했다. 사람들은 이 몇 가지 방법에서 조금만 바꾸면 수평으로 가운데를 차지하게 할 수 있다. 그러면 원소의 수평으로 가운데를 차지하는 효과를 얻을 수 있다.실현 방법이 매우 많으니 여러분은 필요에 따라 다른 방법을 선택할 수 있습니다.이상은 제가 수집하고 정리한 부분입니다. 참고만 하겠습니다. 필요한 친구에게 도움이 되었으면 좋겠습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
