CSS를 사용하여 텍스트 정렬 설정

<시간/>

수평 정렬을 위해 CSS text-align 속성을 사용하고 CSS padding-bottom과 CSS padding-top을 사용하거나 수직 정렬을 위해 CSS line-height를 사용하여 html 문서의 텍스트를 정렬할 수 있습니다.

구문

다음은 위에서 언급한 CSS 속성에 대한 구문입니다 -

Selector {
   text-align: center | left | right | justify | inherit | initial;
}
Selector {
   padding: /*value*/;
}
Selector {
   line-height: /*value*/;
}

텍스트를 수평으로 정렬하는 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Alignment</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.seats span{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
   width: 120px;
   display: inline-block;
   background-color: #48C9B0;
}
.left{
   text-align: left;
}
.right{
   text-align: right;
}
.center{
   text-align: center;
}
.seats{
   text-align: center;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
</div>
</body>
</html>

출력

CSS를 사용하여 텍스트 정렬 설정

텍스트를 세로로 정렬하는 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Alignment</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.seats span:not(.withPadding){
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
}
.seats span:not(.vertical){
   height: 40px;
   display: inline-block;
   background-color: #48C9B0;
}
.withPadding{
   padding: 20px 20px 0px;
   height: 20px;
   color: white;
   border: 4px solid #000;
}
.vertical{
   display: inline-table;
   background-color: #48C9B0;
   height: 40px;
}
.verticalText {
   display: table-cell;
   vertical-align: middle;
}
.withLineHeight{
   line-height: 40px;
}
.seats{
   text-align: center;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
</body>
</html>

출력

CSS를 사용하여 텍스트 정렬 설정