web-dev-qa-db-ja.com

フロート要素を中心に配置する方法

私はページネーションを実装しています、そしてそれは中心に置かれる必要があります。問題は、リンクをブロックとして表示する必要があるため、フローティングにする必要があることです。しかし、それで、text-align: center;はそれらに働きません。ラッパーのdivパディングをleftにすることで実現できますが、ページごとにページ数が異なるため、うまくいきません。これが私のコードです：

.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

css-floatcentercss
331
Mike

floatsを削除し、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上でもクロスブラウザで動作します。

quirksmode からの引用

インラインブロックはインラインで（つまり、隣接するコンテンツと同じ行に）配置されますが、ブロックとして動作します。

これはフロートを効果的に置き換えることができます。

この値の実際の使い方は、インライン要素に幅を与えたいときです。状況によっては、実際のインライン要素の幅を許可していないブラウザもありますが、display：inline-blockに切り替えると、幅を設定できます。」（ http://www.quirksmode.org/ css/display.html＃inlineblock ）.

W3C仕様から ：

[inline-block]要素にインラインレベルのブロックコンテナを生成させます。インラインブロックの内側はブロックボックスとしてフォーマットされ、要素自体はアトミックインラインレベルボックスとしてフォーマットされます。

377
Arnaud Le Blanc

私は何年もの間私があるブログで学んだ古いトリックを使っているので、すみません私は彼に信用を与えるために名前を覚えていません。

とにかく浮遊要素を中心に置くためにこれは働くべきです：

このような構造が必要です。

    .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>

トリックはコンテナーが内容に応じて幅を変えるように左へフロートを与えることです。それは位置の問題です：相対的で、2つのコンテナに50％と-50％を残しました。

良いことは、これはクロスブラウザであり、IE 7以降で動作するはずです。

143
lukart

フロートのセンタリングは簡単です 。コンテナのスタイルを使うだけです：

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

浮動要素の余白を変更します。

.pagination a{ margin: 0 2px; }

または

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

残りはそのままにしておきます。

メニューやページネーションのようなものを表示するのが私にとって最良の解決策です。

長所：

  • あらゆる要素（ブロック、リスト項目など）のクロスブラウザ

  • 単純さ

弱点：

  • すべてのフローティング要素が1行になっている場合にのみ機能します（通常メニューでは問題ありませんが、ギャラリーでは問題ありません）。

@ arnaud576875 inline-block 要素を使用すると、ページネーションにはアンカー（インライン）のみが含まれ、リスト項目やdivは含まれないため、（ブラウザ間で）うまく機能します。

長所：

  • 複数行の項目に対して機能します。

短所：

  • インラインブロック要素間のギャップ - 単語間のスペースと同じように機能します。コンテナの幅とスタイルの余白の計算に問題が発生する可能性があります。ギャップ幅は一定ではありませんが、ブラウザによって異なります（4〜5ピクセル）。このギャップを解消するために、私はarnaud576875コードを追加します（完全にはテストされていません）。

    .pagination {単語の間隔：-1em; }

    。単語の間隔：.1em; }

  • iE6/7のblock要素とlist-items要素では動作しません

30
romprzy

コンテナのwidthをpxに設定して追加します。

margin: 0 auto;

参照 。

12
AMB

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 -->
8
Santosh Khalse

私は最良の方法は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

4
Tarod

IE7 inline-blockがわかりません。あなたが追加する必要があります：

display:inline;
zoom: 1;
2
Krisada Art
text-align: center;
float: none;
2
Michael

これをあなたに追加する

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

*あなたのコンテナの幅が50ピクセルの場合は25ピクセル、10センチの場合は5ピクセルとなります。

1
11-
<!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

必要なdivを2つ以上作成し、それぞれに100pxのような一定の幅を与えてから左右に浮動

ステップ2

次に、これら2つのdivを別のdivにワープして200ピクセルの幅にします。このdivにmargin autoを適用します。それはかなりうまくいきます。上記の例を確認してください。

0
noel jose

これを行うには、left、transform、および状況に応じてpositionを "text-align：center"を2〜3行のcssに置き換えて.paginationを変更します。

.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 -->
0
mwag