본문 바로가기

HTML,CSS

210404 상단 메뉴에서 로고를 수직 기준 가운데 정렬하기 방법

 

HTML

<div id='head'>
	<div id='logo_wrap'>
		<img src='/img/logo0404.gif' />
	</div>
</div>

 

1. 그누보드에서는 이 방법이 100%로 잘 먹힌다. 근데 다른 데서 하면 안 됨. 아마도 그누보드에서 기본적으로 세팅해둔 css 에서 이 방법이 가능하도록 되어 있겠지??

CSS

#head {position:relative;margin:0 auto;height:100px;margin:0 30px 0 30px;}
#logo_wrap {float:left;height:100px;line-height:100px;width:120px;}

 

2. 그 외 다른 데서 작업할 때 사용.

CSS

#head {width:1000px;height:180px;}
#logo_wrap {height:180px;display:flex;justify-content:center;align-items:center;}
728x90