CSS 정렬

CSS 수평 정렬(Horizontal Align)

CSS에는 요소의 수평 정렬을 위한 여러 속성이 있습니다.

블록 요소 정렬

블록 요소는 전체 너비를 차지하고 줄 바꿈으로 둘러싸인 요소입니다.

블록 요소의 예:

<h1>
<p>
<div>

이 장에서는 블록 요소를 수평으로 정렬하는 방법을 알려 드리겠습니다. 공들여 나열한 것.

중앙 정렬, 여백 속성

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

margin 속성은 왼쪽 및 오른쪽 여백 설정으로 임의로 분할되어 자동으로 지정될 수 있습니다. 결과는 중앙 정렬 요소입니다.

Example

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .center
        {
            margin:auto;
            width:70%;
            background-color:#b0e0e6;
        }
    </style>
</head>

<body>
<div class="center">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</body>
</html>

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

프로그램을 실행하여 사용해 보세요

위치 속성을 사용하여 왼쪽 및 오른쪽 정렬을 설정합니다.

요소를 정렬하는 방법 중 하나는 절대 위치 지정을 사용하는 것입니다.

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .right
        {
            position:absolute;
            right:0px;
            width:300px;
            background-color: #4ce667;
        }
    </style>
</head>

<body>
<div class="right">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>

참고: 절대 위치 지정 문서 흐름과 아무 관련이 없으므로 페이지의 다른 요소를 오버레이할 수 있습니다.

프로그램을 실행하고 사용해 보세요

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

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

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        .right
        {
            float:right;
            width:300px;
            background-color:#b0e0e6;
        }
    </style>
</head>

<body>
<div class="right">
    <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。    青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</p> <p>青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p> </div> </body> </html>

제출하다 코드 재설정

자동운전