이 CSS 자습서에서는 텍스트를 가운데에 맞추고 요소를 차단하는 방법을 살펴보겠습니다. 레이아웃에서 요소를 가로 및 세로로 가운데에 맞추는 데 사용할 수 있는 몇 가지 트릭이 있습니다.
텍스트 요소 가운데 정렬
더 큰 요소 내에서 텍스트를 가운데 정렬하려면 text-align: center;를 사용하세요. 아래와 같이:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
.div-class {
text-align: center;
background-color: lightblue;
}
button {
width: 200px;
}
</style>
</head>
<body>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by text-align: center</p>
</div>
</body>
</html>
에 의해 중앙에 배치됩니다. 중앙 정렬 블록 요소:
중심 블록 요소는 <body>를 사용하여 가장 잘 설명됩니다. HTML 문서의 태그. 해야 할 일은 전체 컨테이너의 너비를 제어한 다음 여백을 자동으로 설정하는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
</body>
</html>
이미지 중앙 정렬:
이미지를 가운데에 맞추려면 CSS 선택기에서 표시를 차단으로 변경한 다음 %를 사용하여 이미지 요소의 너비를 제어합니다. 또는 px . margin 설정 auto으로 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
div에서 세로 및 가로 중앙:
패딩:
<div>에서 세로로 가운데에 맞추려면 , 여러 가지 방법이 있습니다. 첫째, 아마도 가장 쉬운 방법은 <div>에서 패딩을 조정하는 것입니다. – 그런 다음 text-align: center 를 사용할 수 있습니다. 단락을 가로로 가운데에 맞추려면:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
줄 높이:
또한 text-align:center와 함께 가운데에 맞추려는 블록 요소의 높이로 line-height를 설정하여 요소를 가운데에 정렬할 수 있습니다. 여러 줄이 있는 경우 부모와 자식 모두에 line-height를 사용하고 vertical-align: middle을 추가하세요. 및 display: inline-block 아이에게:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-lineheight {
line-height: 200px;
border: 5px double ivory;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="vertical-center-lineheight">
<p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.</p>
</div>
<div id="vertical-center-lh-multiple">
<p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block, and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. </p>
</div>
</body>
</html>
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
변환:
요소를 중앙에 배치하는 또 다른 방법은 위치 및 변환을 사용하는 것입니다. 상위 요소를 position:relative로 설정하고 하위 요소를 절대 위치로 설정합니다. 자식 요소는 50%에서 위쪽과 왼쪽에 배치해야 하며 그런 다음 transform 속성을 사용하여 div의 텍스트를 조정합니다. 이 속성에 대한 자세한 내용은 다른 게시물에서 다루도록 하겠습니다. 현재로서는 100% 명확하지 않아도 괜찮습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-transform {
height: 200px;
position: relative;
border: 5px double ivory;
margin-bottom: 20px;
}
#vertical-center-transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="vertical-center-transform">
<p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT</strong> center aligned.</p>
</div>
</body>
</html>
플렉스박스:
마지막으로 flexbox를 사용하여 요소를 중앙에 배치할 수 있습니다. display:flex 를 중앙에 배치하려는 하위 요소의 상위 요소로 설정한 다음 align-items 및 justify-content 를 사용하여 중앙에 배치합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-flexbox {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double ivory;
}
</style>
</head>
<body>
<div id="vertical-center-flexbox">
<p>I am vertically and horizontally centered in a div using flexbox.</p>
</div>
</body>
</html>
다음은 레이아웃에서 요소를 중앙에 배치하는 문제를 해결할 수 있는 가장 일반적인 방법입니다.