안녕하세요,
'연락처 정보'div를 중앙에 배치하려고합니다. 그러나 위치 를 사용한 후 아래 코드를 사용 했습니다 . 고정 된 것처럼 보이지 않습니다. position : fixed 를 사용하는 동안 완벽하게 중앙에 배치하는 또 다른 방법이 있습니까? 위아래로 스크롤하는 동안 div를 중앙에 유지하고 싶습니다. 어떤 도움을 주시면 감사하겠습니다!
.secondary {
height: 350px;
width: 400px;
background-color: #ccc;
box-shadow: 5px 5px 5px #000;
margin-top: 200px;
position: fixed;
margin-left: 40%;
}<section class="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:###-###-####">###-###-####</a></li>
<li class="mail"><a href="mailto:e************@gmail.com" target="_blank">e************@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=ec#######" target="_blank">@ec*******</a></li>
<li class="linkedin"><a href="http://linkedin.com/in/e####-######-8a791988" target="_blank">Edwin Castro</a></li>
</ul>
</section>div를 반응 형으로 만드는 대신 고정 크기를 사용하고 있으므로 다음을 사용할 수 있습니다.
.secondary {
height: 350px;
width: 400px;
background-color: #ccc;
box-shadow: 5px 5px 5px #000;
position: fixed;
margin-left: -200px;
margin-top: -175px;
left: 50%;
top: 50%;
}
요소를 중앙으로 이동 한 다음 음의 여백을 사용하여 전체 너비 / 높이의 절반만큼 뒤로 당겨 완벽하게 중앙에 둡니다.
이것은 꽤 오래된 접근 방식처럼 느껴집니다. 대신 반응 형으로 만들고 싶다면 다음과 같이 시도해 볼 수 있습니다.
.secondary {
height: 350px;
width: 100%;
max-width: 400px;
background-color: #ccc;
box-shadow: 5px 5px 5px #000;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
찾고있는 정확한 스타일을 제공하지 못할 수도 있지만 올바른 길로 안내 할 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다