Jam's story

[CSS] css레이아웃 수평정렬 수직정렬 본문

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>
Insert title here

hello world!

이미지를 가운데정렬
<style type="text/css">
img{width: 40%; 
display:block;
margin:0 auto;
/* width를 줄이면 높이는 자동적으로 줄어든다.  */
}
</style>
position: 왼쪽 오른쪽 정렬 

1번째 방법 ) absolute는 일반 흐름에서 제거되고 , 요소가 겹칠 수 있다 .

position:absolute;
right:0;

2번째 방법 ) 

float: right;

이렇다면, 아래에 오는 컨텐츠에 오버플로우가 발생할 수 있기 때문에 아래와 같은 처리를 해준다. 

.clearfix::after{
content:"";
clear:both;
display: table;
}

 

 

 

 

전체코드

<!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;
}

</style>
<style type="text/css">
img{width: 40%; 
display:block;
margin:0 auto;
/* width를 줄이면 높이는 자동적으로 줄어든다.  */
}
</style>
<style type="text/css">
.right{width:250px;
border: 3px solid #73ad21;
/* position:absolute;
absolute는 일반 흐름에서 제거되고 , 요소가 겹칠 수 있다 .
right:0; */

float: right;
}
.clearfix::after{
content:"";
clear:both;
display: table;
}
</style>
</head>
<body>
<div class="center">
<p>hello world!</p>

</div>
<hr>
<h3>이미지를 가운데정렬</h3>
<img alt="" src="../images/paris.jpg">

<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione laboriosam accusamus neque esse molestiae amet numquam eveniet facere quos odit accusantium atque repudiandae culpa. Ex aliquam provident consectetur sed a.</p>
</div>
</body>
</html>
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 선택자 혹은 결합자  (0) 2022.05.24
[CSS] 내부의 p 태그 글씨들을 수직/수평정렬  (0) 2022.05.24
[CSS] form 양식 2  (0) 2022.05.24
[CSS] 로그인 form 양식  (0) 2022.05.24
[CSS] float과 clear 속성  (0) 2022.05.24
'WEB/CSS' Related Articles more
Comments