CSS 데모: text-align 데모 버튼을 클릭해 보세요!
selector {
    text-align: /* value */
}
/* 키워드 값 */
text-align: left;
text-align: right;
text-align: start;
text-align: end;
text-align: center;
text-align: justify;

/* 글로벌 값 */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;
text-align: justify; 특히 영문의 경우 단어 사이의 일관되지 않은 간격을 보입니다.
<style>
    p {
        background-color: yellowgreen;
        text-align: justify;
    }
</style>
<p>text-align: justfiy;</p>
실제 적용된 모습 text-align: justify; 사용 시 텍스트가 콘텐츠인 경우 라인 박스에 채워지지 않았을 경우 start 값으로 정렬됩니다.
<style>
    span {
        text-align: center;
    }
</style>
<span>text-align: center;</span>
실제 적용된 모습 <span> 태그에 text-align: center;를 적용한 모습
<style>
    span {
        text-align: center;
        background-color: yellowgreen;
    }
</style>
<span>text-align: center;</span>
실제 적용된 모습 <span> 태그에 text-align: center;를 적용한 모습
<div class="container">
    <img class="image" src="image-source.jpg" alt="이미지">
</div>
.container {
    background-color: orange;
    text-align: center; /* 좌우 공간이 있는 조상 요소의 가로 공간을 기준으로 자손 요소의 텍스트, 이미지 등 인라인 레벨 content를 가운데 정렬시킴 */
}
.image {
    width: 200px;
    vertical-align: top;
}
실제 적용된 모습
<style>
[type="text"] {
    padding: 0.5em;
    outline: none;
    border: none;
    border-bottom: 2px solid;
    text-align: center;
    transition: all 0.3s;
    width: 300px;
}
[type="text"]:focus {
    border-color: #006466;
    background-color: rgba(0, 116, 117, .1);
}
[type="text"]::placeholder {
    transition: opacity 0.3s;
}
[type="text"]:focus::placeholder {
    opacity: 0;
}
</style>
<input type="text" placeholder="여기에 입력하세요...">
실제 적용된 모습

caniuse.com에서 더 자세한 정보를 확인해 보세요.