'정렬'에 해당되는 글 2건

  1. Square 3.4 패치 노트 (1)
  2. CSS 가로뿐만이 아니라 세로로도 가운데 정렬하기

Square 3.4가 릴리즈되었습니다. 카드 형식에 따른 글자 정렬 기능과 세부적인 성능 향상과 디자인 수정이 적용되었습니다.


http://square.tarks.net


Square 3.4 패치 노트


http://square.tarks.net


Square 'Square 3.4 패치노트' - http://tarks.net/square/0HHa6gQlViNa


1. 정렬 기능 추가

글자 정렬을 원하는 형식에 따라 가운데를 중심으로 정렬 혹은 왼쪽부터 작성되도록 정렬할 수 있도록 업데이트되었습니다.



2. 이 외 개선점

디자인 세부 요소 변경 및 성능 향상.

'Square' 카테고리의 다른 글

3월 2일 업데이트  (0) 2019.03.02
2월 28일 업데이트  (0) 2019.03.01
Square 3.4 패치 노트  (1) 2017.09.26
Square 3.3 패치 노트  (0) 2017.07.22
Square 3.2 패치 노트  (0) 2017.07.06
Square 3.1 패치 노트  (0) 2017.07.03

가로 방면에서 가운데를 정렬하게 하는 방법은 잘 알려졌지만, 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>