글자를 가로로 가운데 정렬하는 방법을 상세히 설명하고 CSS와 HTML 코드를 포함한 예제를 제공하겠습니다. 각 부분을 상세히 설명하고 마지막에 티스토리용 태그를 한 줄로 나열하겠습니다.
1. 가로 가운데 정렬 (텍스트 요소):
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
text-align: center;
}
</style>
</head>
<body>
<p class="center-text">이 텍스트는 가로로 가운데 정렬됩니다.</p>
</body>
</html>
2. 가로 가운데 정렬 (블록 요소):
<!DOCTYPE html>
<html>
<head>
<style>
.center-block {
margin: 0 auto;
width: 50%;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="center-block">
<p>이 블록은 화면 가로 중앙에 정렬됩니다.</p>
</div>
</body>
</html>
3. 텍스트 가로 가운데 정렬 (텍스트 요소):
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<p class="center-text">이 텍스트는 가로로 가운데 정렬됩니다.</p>
</body>
</html>
4. 텍스트 가로 가운데 정렬 (텍스트 요소):
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<p class="center-text">이 텍스트는 가로로 가운데 정렬됩니다.</p>
</body>
</html>
'CSS' 카테고리의 다른 글
| 테두리 추가: 요소 주위에 테두리 추가. (0) | 2023.12.23 |
|---|---|
| 이미지 크기 조절: 이미지의 가로와 세로 크기 조절. (0) | 2023.12.23 |
| 배경색 변경: 요소의 배경 색상 설정 (0) | 2023.12.22 |
| 텍스트 스타일링 예제 : 텍스트의 크기, 색상 및 폰트 스타일 변경. (0) | 2023.12.22 |
| CSS 플러그인 사용: 외부 CSS 라이브러리 및 플러그인을 활용하기 (0) | 2023.12.22 |