민서네집

div 안에서 text를 수직으로 정렬하기 (Vertically align text within div element) 본문

WEB (HTML, CSS)

div 안에서 text를 수직으로 정렬하기 (Vertically align text within div element)

브라이언7 2013. 5. 3. 10:30

[출처] http://stackoverflow.com/questions/6679966/vertically-align-text-within-div-element


[참고] http://www.jakpsatweb.cz/css/css-vertical-center-solution.html


여기서 핵심은 display: table; 과 display: table-cell 스타일을 주고, vertical-align 스타일을 설정하면 된다는 것.


Google에서 더 검색해 봐도 이것보다 더 좋은 해결책은 찾지 못했다.






< Sample Page >


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle}</title>
<link rel=StyleSheet href="<c:url value="/resources/css/admin.css"/>" type="text/css">
<%@include file="/resources/jsp/mgmt/layout_js.jsp"%>
</head>
<body>
	<div id="wrap">
		<div id="header"><jsp:include page="/resources/jsp/layout/header.jsp"></jsp:include></div>
		<div id="menu"><jsp:include page="/resources/jsp/layout/menu.jsp"></jsp:include></div>
		<div id="contents">
			<h1>Contents</h1>
		</div>
		<div id="footer"><%@include file="/resources/jsp/layout/footer.jsp"%></div>
	</div>
</body>
</html>


< /WebContent/resources/jsp/layout/header.jsp >


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<div id="header">
	<div id="h_logo_div">
		<h1>
			<a href="<c:url value="/main" />"><img
				src="<c:url value="/resources/img/logo.gif" />"
				alt="로고"></a>
		</h1>
	</div>
	<div id="h_user_div">
		<div id="h_text_div"><span>${userName}(${userId})님 반갑습니다.</span><img id="h_logout_img" src="<c:url value="/resources/img/login/logout.gif" />" onclick="javascript:logout()" alt="로그아웃" /></div>
	</div>
	<div id="h_bottom_line"></div>
</div>


< /WebContent/resources/css/admin.css >


/* body 공통 속성 */
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {
	margin: 0;
	padding: 0
}

body {
	font: normal dotum, '돋움';
}

ul,ol,dl {
	list-style: none;
}

img {
	border: 0;
	vertical-align: top;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#wrap {
	margin: 0 auto;
	width: 1000px;
}

#header {
	float: left;
	width: 1000px;
	height: 145px;
	margin-bottom: 15px;
}

#header > #h_logo_div {
	float: left;
	width: 500px;
	height: 140px;
}

#header > #h_user_div {
	float: right;
	width: 500px;
	height: 140px;
	display: table;
}

#header > #h_user_div > div#h_text_div {
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
}

#header > #h_bottom_line {
	clear: both;
	height: 5px;
	background-color: #FFFF00;
}

#header > #h_user_div > #h_text_div > #h_logout_img {
	margin-left: 20px;
	cursor: pointer;
}

#menu {
	float: left;
	width: 190px;
}

#contents {
	float: right;
	width: 800px;
	min-height: 600px;
}

#footer {
	float: left;
	width: 1000px;
	margin-top: 20px;
	text-align: center;
}


저작자표시

'WEB (HTML, CSS)' 카테고리의 다른 글

input type="file" 에서 찾아보기 버튼 바꾸기  (0) 2013.09.10
콤보박스(select)에서 Readonly  (2) 2013.09.03
eclipse aptana plugin 설치  (0) 2013.08.07
[html] Select add() Method  (0) 2013.06.26
콤보박스(select)에서 Readonly  (0) 2013.06.11
공유하기 링크
'WEB (HTML, CSS)' Related Articles more
Comments