페이지가 화면보다 큰 경우 화면 중간에 div를 배치하는 방법
안녕하세요, 화면 중간에 div를 가져 오기 위해 다음과 비슷한 것을 사용하고 있습니다.
<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>
그러나 이것의 문제는 항목을 화면이 아닌 페이지 중간에 배치한다는 것입니다. 따라서 페이지가 몇 화면 높이이고 div가 화면에 표시되지 않도록 할 때 페이지 상단에있는 경우 (부품의 상단 부분이 화면에 표시됨). 그것을 보려면 아래로 스크롤해야합니다.
화면 중앙에 어떻게 표시되는지 알려주시겠습니까?
그냥 추가 position:fixed하면 아래로 스크롤해도 볼 수 있습니다. http://jsfiddle.net/XEUbc/1/ 에서 참조하십시오
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
나는 이것이 간단한 해결책이라고 생각한다.
<div style="
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: #f3f3f3;">Full Center ON Page
</div>변환을 사용하십시오.
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
자바 스크립트 솔루션 :
var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
그냥 넣어 margin:auto;
#mydiv {
margin:auto;
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
<div id="mydiv">Test Div</div>
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
이것은 나를 위해 일했다
Short answer, Just add position:fixed and that will solve your problem
<html>
<head>
<style type="text/css">
#mydiv {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100px;
height:200px;
margin:auto;
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
Well, below is the working example for this.
This will handle the center position if you resize the webpage or load in anysize.
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>In above sample loading div will always be in center.
Hoping this will help you :)
In ur script page...
$('.a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
Use a-middle class in the Div...
<div class="a-middle">
Two ways to position a tag in the middle of screen or its parent tag:
Using positions:
Set the parent tag position to relative (if the target tag has a parent tag) and then set the target tag style like this:
#center {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Using flex:
The parent tag style should looks like this:
#parent-tag {
display: flex;
align-items: center;
justify-content: center;
}
Try this one.
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I just tested that exact code on a test page and it centered the div perfectly on the page, even with about 100 <br /> before it to try and push it down.
Maybe try checking the rest of your code to see if you have something that is either over-writing the DIV's values or that is effecting your DIV to cause these issues.
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
For this you would have to detect screen size. That is not possible with CSS or HTML; you need JavaScript. Here is the Mozilla Developer Center entry on window properties https://developer.mozilla.org/en/DOM/window#Properties
Detect the available height and position accordingly.
'Programing' 카테고리의 다른 글
| 기본 및 하위 클래스를 사용한 Python 단위 테스트 (0) | 2020.06.27 |
|---|---|
| 유튜브 iframe W 모드 문제 (0) | 2020.06.27 |
| 64 비트 Windows에 SetupTools 설치 (0) | 2020.06.27 |
| Python 자체 디버거 (PDB) 내에서 여러 줄 명령문을 실행하는 방법 (0) | 2020.06.27 |
| Entity Framework Code First에서 객체를 분리하려면 어떻게해야합니까? (0) | 2020.06.27 |