programing

플로팅 요소의 중심을 어떻게 맞추나요?

lastcode 2023. 9. 9. 09:33
반응형

플로팅 요소의 중심을 어떻게 맞추나요?

저는 페이지를 구현하고 있고, 그것은 중심을 잡을 필요가 있습니다.문제는 링크를 블록으로 표시해야 하기 때문에 띄워야 한다는 것입니다..text-align: center;그들에게는 통하지 않습니다.저는 왼쪽의 포장지 디브 패딩을 주면 달성할 수 있었지만, 페이지마다 페이지 수가 달라서 안 될 것 같습니다.제 암호는 이렇습니다.

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

아이디어를 얻기 위해서, 제가 원하는 것은.

alt text

하기 제거 중float s를 사용하면, inline-block문제를 해결할 수 있습니다.

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

((부터 )로 -합니다부터 시작하는 줄을 .+.)

.pagination {
  text-align: center;
}
.pagination a {
  + display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

inline-block요소가 원래 인라인 요소인 한 IE6에서도 크로스 브라우저로 작동합니다.

별난 모드에서 인용:

인라인 블록은 인라인으로 배치됩니다.인접한 컨텐츠)와 동일한 라인에 있지만 블록으로 동작합니다.

플로트를 효과적으로 대체할 수 있습니다.

이 값을 실제로 사용하는 것은 인라인 요소의 너비를 지정하려는 경우입니다.상황에 따라 실제 인라인 요소의 너비를 허용하지 않는 브라우저도 있지만 디스플레이로 전환하면 너비를 설정할 수 있습니다."(http://www.quirksmode.org/css/display.html#inlineblock ).

W3C 사양에서:

[inline-block]은 요소가 인라인 레벨 블록 컨테이너를 생성하도록 합니다.인라인 블록 내부는 블록 상자로, 요소 자체는 원자 인라인 레벨 상자로 형식이 지정됩니다.

저는 몇 년 동안 블로그에서 배운 오래된 속임수를 사용하기 때문에, 그에게 학점을 주기 위한 이름을 기억하지 못해 죄송합니다.

어쨌든 부동 요소의 중심을 맞추려면 다음과 같이 해야 합니다.

다음과 같은 구조가 필요합니다.

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }
<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>

요령은 내용물에 따라 용기의 폭을 변화시키기 위해 플로트 레프트를 주는 것입니다.그것은 위치의 문제입니다: 두 컨테이너의 상대적 50%와 왼쪽 50% 그리고 -50%.

좋은 점은 크로스 브라우저이기 때문에 IE7+에서 작동해야 한다는 것입니다.

플로트 센터링은 쉽습니다.컨테이너의 스타일만 사용하면 됩니다.

.pagination{ display: table; margin: 0 auto; }

부동 요소의 여백 변경:

.pagination a{ margin: 0 2px; }

아니면

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }

그리고 나머지는 그대로 놔둡니다.

메뉴나 페이지 같은 것들을 전시하는 것이 제게 가장 좋은 해결책입니다.

장점:

  • 요소(블록, 리스트-슬롯 등)에 대한 교차 편집

  • 간명함

약점:

  • 모든 부동 요소가 한 줄에 있을 때만 작동합니다(일반적으로 메뉴에는 괜찮지만 갤러리에는 해당되지 않음).

@arnaud576875 이 경우 페이지에 앵커(인라인)만 포함되어 있고 목록 항목이나 디브가 없으므로 인라인 블록 요소를 사용하면 효과가 좋습니다(크로스 브라우저).

장점:

  • 다중 행 항목에 대해 작동합니다.

약점:

  • 인라인 블록 요소 사이의 간격 - 단어 사이의 공백과 같은 방식으로 작동합니다.용기의 폭과 스타일 마진을 계산하는 데 문제가 발생할 수 있습니다.간격 폭이 일정하지는 않지만 브라우저별(4~5px)입니다.이러한 공백을 제거하기 위해 arnaud576875 코드(완전한 테스트를 거치지 않음)에 추가합니다.

    .demination{ word-dem: -1em; }

    .distination a {단어 검색: .1em; }

  • IE6/7에서는 블록 및 목록 항목 요소에서 작동하지 않습니다.

컨테이너 설정width인에px추가:

margin: 0 auto;

참고.

Flex 사용

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

text-align: center;
float: none;

제 생각에 가장 좋은 방법은margin대신에display.

예를 들어:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

결과와 코드를 확인합니다.

http://cssdeck.com/labs/d9d6ydif

변경을 통해 이 작업을 수행할 수도 있습니다..pagination"text-signal: center"를 왼쪽, 변환 및 상황에 따라 위치에 대한 css의 2~3줄로 대체함으로써.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

IE7은 모릅니다inline-block. 다음을 추가해야 합니다.

display:inline;
zoom: 1;

스타일링에 추가

position:relative;
float: left;
left: calc(50% - *half your container length here);

*용기 너비가 50px이면 25px, 10em이면 5em입니다.

<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

스텝1

2개 이상의 디브를 만들고 각각 100pcs와 같은 일정한 폭을 제공한 후 왼쪽 또는 오른쪽으로 띄우세요.

스텝2

그러면 이 두 디브를 다른 디브에 넣고 200px의 폭을 주어 이 디브에 마진을 자동으로 적용합니다. 붐 꽤 잘 작동합니다.위의 예를 확인합니다.

그냥 추가.

left:15%;

내 CSS 메뉴에

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

센터링 트릭도 했습니다.

언급URL : https://stackoverflow.com/questions/4767971/how-do-i-center-floated-elements

반응형

'programing' 카테고리의 다른 글

MySQL 데이터베이스에서 이미지를 검색하고 HTML 태그에 표시하는 방법  (0) 2023.09.14
Gradle 5 JUNit BOM 및 Spring Boot 잘못된 버전  (0) 2023.09.09
Informix에서 Oracle로 여러 테이블을 포함하는 왼쪽 외부 조인 다시 쓰기  (0) 2023.09.09
Twitter 부트스트랩 텍스트 상자 글로우 및 섀도 재정의  (0) 2023.09.09
What does the smiley face ":)" mean in CSS?  (0) 2023.09.09

'programing'의 다른글

  • 현재글플로팅 요소의 중심을 어떻게 맞추나요?

관련글

댓글

티스토리툴바