float:left 요소를 중앙에 배치하는 방법을 알고 있나요?-CSS 튜토리얼-php.cn

float:left 요소를 중앙에 배치하는 방법을 알고 있나요?

yulia

풀어 주다： 2018-09-21 15:38:16

원래의

6331명이 탐색했습니다.

플로팅은 페이지 레이아웃에서 자주 사용됩니다. 플로팅된 후에도 요소가 여전히 중앙에 위치할 수 있나요? 이 글은 주로 float:left 요소를 중앙에 배치하는 방법에 대해 설명합니다. 모르는 분들을 위해 계속해서 읽어주세요. 굉장히 고급스럽고 고급스럽게 들리는데 막상 해보면 엄청 간단해요

첫번째 방법

<style type="text/css">
    .box {
        float: left;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
<body>
    <div class="box"></div>
</body>

로그인 후 복사

이제 왔어요 위치는 페이지의 맨 왼쪽에 있습니다.

float:left 요소를 중앙에 배치하는 방법을 알고 있나요?

우리 모두는 부동의 경우 margin: 0 auto;를 추가해도 효과가 없다는 것을 알고 있습니다.

그런 다음 상자 밖에 또 다른 div를 추가하여 아빠가 페이지 중앙에 오도록 아빠를 제공합니다

<style type="text/css">
    .con {
        position: relative;
        float: left;
        left: 50%;
        background: lightblue;
    }
    .box {
        position: relative;
        float: left;
        left: -50%;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
<body>
    <div class="con">
        <div class="box"></div>  
    </div>
</body>

로그인 후 복사

코드를 실행하면 다음과 같은 결과를 얻습니다# 🎜 🎜#

float:left 요소를 중앙에 배치하는 방법을 알고 있나요?

파란색 콘은 빨간색 벽돌 상자의 "아버지"입니다. 그림에서 콘이 왼쪽으로 이동되었음을 분명히 알 수 있습니다. 포지셔닝. 상자는 상대 위치 지정을 통해 con의 -50%, 즉 정확한 중심에 위치합니다.

하위 요소를 상대 위치로 지정하려면 상위 요소를 기준으로 위치를 지정해야 합니다. float:left를 사용하면 하위 요소가 동일한 수평선에 표시될 수 있습니다. left:-50%는 다음과 같습니다. 자식 요소의 전체 위치는 다음과 같습니다. 너비는 부모 요소의 너비입니다. left:50%는 자식 요소의 내용을 부모 요소를 기준으로 왼쪽 위 지점으로 부모 너비의 절반만큼 이동하는 것입니다. (right:50%는 오른쪽에서 50%, 효과는 동일함) 자식 요소를 정확히 구현합니다. 콘텐츠를 중앙에 표시하는 효과입니다.

다른 분이 인용한 글이라 더 이해가 가실 겁니다.

두 번째 방법

은 기본 JavaScript를 사용하여 작성되었습니다.

<body>
    <div id="con" class="box"></div>  
    <script type="text/javascript">
        var con = document.getElementById(&#39;con&#39;);
        con.style.position = &#39;relative&#39;;
        con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + &#39;px&#39;;
    </script>
</body>

로그인 후 복사

화면의 전체 너비에서 빼기 중앙 위치를 얻으려면 상자 자체의 너비를 2로 나눕니다.

세 번째 방법

<body>
    <div class="box"></div>
    <script type="text/javascript" src="../js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
         $(&#39;.box&#39;).css({
              &#39;position&#39; : &#39;relative&#39;,
              &#39;left&#39; : ($(window).width() - $(&#39;.box&#39;).outerWidth()) / 2 + &#39;px&#39;
          })
     </script>
</body>

로그인 후 복사

은 JS와 같습니다~ #🎜🎜 #

지금은 세 가지 방법만 배웠네요~ 앞으로도 더 많은 방법이 나왔으면 좋겠습니다!

위 내용은 float:left 요소를 중앙에 배치하는 방법을 알고 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!