CSS 수평 정렬(수평 정렬)

CSS 가로 정렬

블록 요소 정렬

블록 요소는 앞뒤에 줄 바꿈이 포함되어 전체 너비를 차지하는 요소입니다.

블록 요소의 예:

<h1>

<p>

<div>

여기에 이번 장에서는 레이아웃에서 블록 요소를 수평으로 정렬하는 방법을 보여 드리겠습니다.

가운데 정렬, 여백 속성

블록 요소를 사용하여 왼쪽 및 오른쪽 여백을 "자동" 정렬로 설정합니다.

참고: IE8에서 margin:auto 속성을 사용하면 선언되지 않으면 제대로 작동하지 않습니다!DOCTYPE

margin 속성은 왼쪽 및 오른쪽 여백 설정으로 임의로 분할하여 결과를 자동으로 지정할 수 있습니다. 중앙에 있는 요소가 나타납니다:

인스턴스

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

팁: 너비가 100%이면 정렬이 효과가 없습니다.

참고: IE5의 블록 요소에는 여백 처리 버그가 있습니다. 위의 예제가 IE5에서 작동하려면 몇 가지 추가 코드를 추가해야 합니다.

크로스브라우저 호환성 문제

<p 이와 같은 요소를 정렬할 때는 항상 요소의 여백과 패딩을 미리 결정해 두는 것이 좋습니다. 이는 다양한 브라우저에서 시각적 차이를 방지하기 위한 것입니다.

IE8 이하에서는 position 속성을 사용할 때 문제가 있습니다. 컨테이너 요소(이 경우 <div class="container">)에 지정된 너비가 있고 !DOCTYPE 선언이 누락된 경우 IE8 및 이전 버전에서는 오른쪽에 17px 여백을 추가합니다. 이것은 스크롤되는 예약된 공간인 것 같습니다. position 속성을 사용할 때는 항상 DOCTYPE 선언에 설정하세요!

float 속성을 사용하여 왼쪽 및 오른쪽 정렬 설정

float 속성을 사용하는 것은 요소를 정렬하는 방법 중 하나입니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到达了的地方，都属于昨天。哪怕那山再青，那水再秀，那风再温柔。带深的流连便成了一种羁绊，绊住的不仅是双脚，还有未来。</p>
<p>怎麽能不喜欢出发呢？没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩翰，仍然是遗憾；
见了大海的浩翰没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。</p>
</div>
</body>
</html>

크로스브라우저 호환성 문제

이렇게 요소를 정렬할 때는 항상 요소의 여백과 패딩을 미리 결정해 두는 것이 좋습니다. 이는 다양한 브라우저에서 시각적 차이를 방지하기 위한 것입니다.

IE8 이하에서는 float 속성을 사용할 때 문제가 있습니다. 컨테이너 요소(이 경우 <div class="container">)에 지정된 너비가 있고 !DOCTYPE 선언이 누락된 경우 IE8 및 이전 버전에서는 오른쪽에 17px 여백을 추가합니다. 이것은 스크롤되는 예약된 공간인 것 같습니다. float 속성을 사용할 때는 항상 DOCTYPE 선언에 설정하세요!

인스턴스

아아앙

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>突然开始怀念花开。粉色的樱，蓝色的龙胆，堇色的熏衣草，由近而远，延伸向远方天空的尽头。</p> <p>爱你现在的时光。过去的已经过去了，较什么劲呢？未来的还没有来，焦虑什么呢？你知道什么是真正的恐惧吗？</p> </div> <p><b>Note: </b>短篇小说</p> </body> </html>

제출하다 코드 재설정

자동운전