안녕하세요, 페이지가 있는데 페이지 중간에 세로 및 가로로 사각형을 표시하고 싶습니다. 페이지의 약 80 %가 양쪽에 20 %의 공간을 남겨두기를 원하는 컨테이너가 있습니다. 모든 브라우저와 장치에서이 기능을 어떻게 완벽하게 반응시킬 수 있는지 궁금합니다.
<div class="splashcontainer">
<h1 class="splashheader">Title</h1>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.splashcontainer{
margin: 0 auto;
width: 80%;
height: 100%;
min-height: 100%;
}
.splashheader{
text-align: center;
font-size: 62px;
font-family: font-family: 'Montserrat', sans-serif;
}
.splashcontainer div{
width: 20%;
margin: 0px 2% 0 2%;
padding-bottom: 20%;
background-color: deepskyblue;
display: inline-block;
}
감사,
CSS 3 줄을 사용하여 상자를 세로로 정렬 할 수 있습니다 .
.splashcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
다음으로 <html>및 <body>요소가 100 % 높은지 확인합니다 .
마지막으로 <!-- -->.를 사용하여 div 사이의 공간을 처리해야합니다 .
<div class="splashcontainer">
<h1 class="splashheader">Title</h1>
<div></div><!--
--><div></div><!--
--><div></div><!--
--><div></div>
</div>
html {
height: 100%;
}
body {
min-height: 100%;
height: 1px;
position: relative;
margin: 0;
}
.splashcontainer{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
width: 80%;
}
.splashheader{
text-align: center;
font-size: 62px;
font-family: font-family: 'Montserrat', sans-serif;
margin-top: 0;
}
.splashcontainer div{
width: 20%;
margin: 0px 2% 0 2%;
padding-bottom: 20%;
background-color: deepskyblue;
display: inline-block;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다