• CSS

CSS로 가운데 정렬 종합 모음(POSITION / DISPLAY / LINE-HEIGHT / MARGIN)

2018-11-09 239

설명

  • 카카오톡 링크

CSS로 가운데 정렬 종합 모음입니다~

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.line {display:inline-table; width:100%; height:100px; position:relative; background:#f2849e; text-align:center; vertical-align:top}
	.line span {font-size:16px; font-weight:400; color:#fff }
	.line span em {font-size:12px}

	/* line-height로 가운데정렬 */
	.line.effect_one {margin-top:0}
	.line.effect_one span {line-height:98px}

	/* position:absolute로 가운데정렬 */
	.line.effect_two {position:relative;}
	.line.effect_two span {position:absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); }

	/* display 로 가운데정렬 */
	.line.effect_three {display:inline-table; text-align:center }
	.line.effect_three .line_inner {display:table-cell; vertical-align:middle;}
	
	/* margin 로 가운데정렬 */
	.line.effect_four {}
	.line.effect_four .line_inner {margin-top:41px}

</style>
<h3 class="view_h3 first_h3">LINE-HEIGHT 로 가운데정렬[반응형일때 완전 일그러짐 1줄이 2줄이 되었을때]</h3>
<div class="line effect_one">
	<span>가운데정렬 텍스트 가운데정렬 텍스트 가운데정렬 텍스트 가운데정렬 텍스트 가운데정렬 텍스트</span>
</div>

<h3 class="view_h3">POSITION:ABSOLUTE 로 가운데정렬[반응형일때도 잘됨]</h3>
<div class="line effect_two">
	<span>가운데정렬 텍스트<em>(position:absolute로 가운데정렬)</em></span>
</div>	

<h3 class="view_h3">DISPLAY 으로 가운데정렬[반응형일때도 잘됨]</h3>
<div class="line effect_three">
	<div class="line_inner">
		<span>가운데정렬 텍스트<em>(display 로 가운데정렬)</em></span>
	</div>
</div>

<h3 class="view_h3">MARGIN 으로 가운데정렬[반응형일때도 수작업 해줘야함]</h3>
<div class="line effect_four">
	<div class="line_inner">
		<span>가운데정렬 텍스트<em>(margin 로 가운데정렬)</em></span>
	</div>
</div>