'Development/CSS'에 해당되는 글 2건

  1. 텍스트가 div 범위 밖으로 나가는 현상 해결하기(줄바꿈 처리하기)
  2. CSS 가로뿐만이 아니라 세로로도 가운데 정렬하기

div 태그에 width를 직접 정해주면 텍스트가 자동으로 줄 바꿈을 하지 못하고 div 범위를 벗어나는 경우가 있습니다.

텍스트가 div 범위 밖으로 나가는 현상 해결하기

이 문제를 해결하는 방법은 간단합니다. div의 스타일을 정해주는 부분에 "word-break:break-all;" 를 추가하면 됩니다.


word-break:break-all;


예시)


저작자 표시 비영리 동일 조건 변경 허락
신고

가로 방면에서 가운데를 정렬하게 하는 방법은 잘 알려졌지만, div 안에서 세로로도 가운데 정렬하는 건 약간 더 까다로운 편입니다. 텍스트가 여러 줄이 되어도 비율을 맞춰 가운데 정렬하게 할 수 있습니다.


 

CSS 가로뿐만이 아니라 세로로도 가운데 정렬하기


CSS 부분

<style>


.outer {
display: table;
width: 300px;
margin-top: 24px;
}

.tablerow {

display: table-row;

}

.content {

width:300px;
height: 300px;

vertical-align: middle;
display: table-cell;

}

</style>


HTML 부분

<div class="outer">
<div class="tablerow">
<div class="content">

가운데에 있을 내용
</div>
</div>
</div>


저작자 표시 비영리 동일 조건 변경 허락
신고