WEB/CSS
[CSS] css레이아웃 수평정렬 수직정렬
애플쩀
2022. 5. 24. 12:47
/* div요소를 가운데 정렬 */
margin:0 auto;
/* 텍스트를 가운데 정렬 */
text-align: center;
img를 margin: 0 auto;만 하면 가운데에 정렬되지 않는다.
인라인모드이기때문에 display: block 으로 바꿔준 후에 사용한다.
텍스트를 오른쪽에 정렬
1번째방법
absolute : 일반 흐름에서 제거되고, 요소 겹칠 수 가 있다.
position: absolute;
right: 0;
2번째 방법
float:right;<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.center{
border: 3px solid green;
width: 50%;
/* div요소를 가운데 정렬 */
margin:0 auto;
/* 텍스트를 가운데 정렬 */
text-align: center;
}
</head>
<body>
<div class="center">
<p>hello world!</p>
</div>
</body>
</html>