부동 요소 가로 가운데 표시 및 브라우저 호환성 처리

이러한 페이지 레이아웃은 한 줄에 여러 개의 다른 영역 내용을 표시하지만, 페이지와 비교하면 가운데로 정렬되어 있는 경우가 종종 있다.이 구역의 내용은 문자뿐만 아니라 그림이나 다른 요소가 혼합되어 있을지도 모르니 주의하십시오.일반적으로 이런 레이아웃에서 우리는 부동float를 사용해야 한다고 생각하기 쉽지만, 어떻게 중간에 맞추고 저급 브라우저를 호환합니까?이어서 아래를 보세요.
먼저 html 코드를 보십시오.

<div class="webFooter">

    <div class="wrap">

        <div class="tabs">

            <ul>

                <li>

                    <a href="javascript:void(0)">     </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a><em>|</em>

                </li>

                <li>

                    <a href="javascript:void(0)">    </a>

                </li>

            </ul>

        </div>

    </div>

</div>

어떤 사람들은 이 item들이 모두 텍스트라고 말할 수 있지만, 사실은 l을 다른 요소 (예:div) 로 바꾸는 것도 가능하다.원리는.랩은 페이지의 중간에 비해 너비가 1200px이고 물론 1000px일 수도 있다. 너비는 자유롭게 정의할 수 있고 내용의 너비보다 크면 된다.그리고tabs 왼쪽 부동 및position:relative 설정하기;left: 50%; 그리고 내부 요소ul에float:left 설정하기;position: relative; left: -50%; 마지막으로 줄 거야.wrap에 오버플로우:hidden;*position: relative;
css 코드는 다음과 같습니다.

<style type="text/css">

body, ul, li, ol, dl, dt, dd {padding: 0; margin: 0; list-style: none;}

.webFooter {height: 100px; font-size: 12px; background: #278ed1; font-family: Microsoft YaHei; color: #fff;}

.webFooter a,

.webFooter a:hover {color: #fff;}

.webFooter .wrap {width: 1200px; margin-left: auto; margin-right: auto; background: red; overflow: hidden; *position: relative;}

.webFooter .tabs {float: left; position: relative; left: 50%; margin-top: 25px;}

.webFooter .tabs ul {float: left; position: relative; left: -50%;}

.webFooter .tabs li {float: left; line-height: 17px;}

.webFooter .tabs a {float: left; font-size: 14px;}

.webFooter .tabs em {float: left; width: 20px; height: 15px; *line-height: 15px; text-align: center;}

</style>

왜 주는지 설명해 주세요.wrap에 오버플로우:hidden;*position: relative;어디?왜냐하면 내용이 길면, 왜냐하면.tabs의left:50%;그 위치를 넘어섰다.랩의 폭 범위는 디스플레이가 조금 작을 때 페이지에 가로 스크롤 바가 나타나고 i7은 비교적 완고하므로 *position:relative를 추가해야 한다.그래야지.관심 있는 단짝은 오버플로우:hidden;*position: relative;한번 해보거나 내용을 얼마나 바꿨는지 다시 해보세요. 다른 느낌이 들 거라고 믿습니다!
마지막으로 l을