어떻게 부동적인 요소를 가운데에 두나요--전단 면접문제

17489 단어
인터넷에 올라온 답안을 검색해 보니 두 가지로 나뉜다.
1. 바깥쪽에 div를 추가할 수 있고 바깥쪽의div는margin을 가운데에 배치하고 안쪽의div 설정폭은 100%이다.
<html>
<head>
<title>     </title>
<style type="text/css">
*{
    margin:0;
    padding:0;
    list-style:none;
}
html{
    height:100%;
}
body{
    
    height:100%;
}
.warp{
    width:960px;
    margin:15px auto;
    padding:5px 0;
    background:#333;
}
.menu{
    float: left;
    width:100%;
    overflow:hidden;
}
.menu ul{
    font: 12px/30px "Times New Roman", Times, serif;
    float:left;
    left:50%;
    margin:0 auto;
    position:relative;
}
.menu ul li{
    float:left;
    position:relative;
    right:50%;
    margin-left:2px;
}
.menu ul li a{
    display:block;
    padding:0 15px;
    text-decoration:none;
    color:#f30;
    background:#eee;
}
.menu ul li a:hover{
    background:#08f;
    color:#fff;
}
.clearfix:after{
    content: ".";
    display: block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    zoom:1;
}
</style>
</head>
<body>
<div class="warp clearfix">
    <div class="menu">
        <ul>
            <li><a href="#">PHP</a></li>
            <li><a href="#">ASP.NET</a></li>
            <li><a href="#">JQUERY</a></li>
            <li><a href="#">AJAX</a></li>
            <li><a href="#">EXTJS</a></li>
        </ul>
    </div>
</div>
</body>
</html>

 
2. 현재div의 폭을 설정하고margin-left:50%를 설정합니다.position:relative; left:-250px;그중의left는 너비의 절반이다.
width:500px;height:300px; float:left; margin-left:50%; p osition:relative; left:-250px; background-color:#CCC;

margin-left:50% 설정하기;뒷부동 요소의 왼쪽은 바로 문서 중간에 위치하고 블록의 상대적 위치를position:relative로 설정합니다.그리고 너비의 2분의 1을 왼쪽으로 옮기면 원소의 가운데를 실현할 수 있다.이 실례에서 너비 500,left는 -250px로 설정합니다.
친애하는 ImGui 라이브러리 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage