안녕하세요~
기존에는 html에서 <center> 태그를 사용했는데
요즘 추세에서는 사용하지 않는 다고 알고 있어서 css 로 설정을 할려고 해요~ 그런데 잘 안되는 점이 있어서
여기 계신 분들께 물어볼려고 합니다.
<html>
<head>
<meta charset=utf-8 name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>연습</title>
<link rel="stylesheet" type="text/css" href="css.css" media="screen"/>
</head>
<head>
<meta charset=utf-8 name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>연습</title>
<link rel="stylesheet" type="text/css" href="css.css" media="screen"/>
</head>
<body>
<div class="box">
<div class="center">
<img class="banner" src="img/img.jpg">
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/* CSS Document */
.body {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 260px;
margin-left: 2%;
margin-right: 2%;
}
width: 100%;
height: 260px;
margin-left: 2%;
margin-right: 2%;
}
.box .center {
width: 20%;
height: 260px;
margin-left: 40%;
margin-right: 40%;
}
width: 20%;
height: 260px;
margin-left: 40%;
margin-right: 40%;
}
.box .center .banner {
width: 200px;
height: 100%;
}
width: 200px;
height: 100%;
}
여기서 center 클래스 css 만 가지고 이미지를 중앙에 배치 할 수 있을까요?
웹브라우저의 가로사이즈를 줄였을 때 이미지가 중앙에 배열이 안되네요;;
알려주세요ㅠㅠ
글쓰기