web-dev-qa-db-fra.com

Comment centrer les éléments flottants?

J'implémente la pagination, qui doit être centrée. Le problème est que les liens doivent être affichés sous forme de bloc, ils doivent donc être flottants. Mais alors, text-align: center; ne fonctionne pas sur eux. Je pouvais y arriver en donnant au wrapper div padding de left, mais chaque page aura un nombre différent de pages, donc cela ne fonctionnerait pas. Voici mon code:

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

Pour avoir l'idée, ce que je veux:

alt text

css-floatcentercss
335
Mike

Supprimer floats et utiliser inline-block peuvent résoudre vos problèmes:

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

(Supprimez les lignes commençant par - et ajoutez les lignes commençant par +.)

.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 fonctionne avec plusieurs navigateurs, même sur IE6, à condition que l'élément soit à l'origine un élément en ligne.

Citation de quirksmode :

Un bloc en ligne est placé en ligne (c'est-à-dire sur la même ligne que le contenu adjacent), mais il se comporte comme un bloc.

cela peut souvent remplacer efficacement les flotteurs:

L'utilisation réelle de cette valeur consiste à donner une largeur à un élément en ligne. Dans certains cas, certains navigateurs n'autorisent pas la largeur d'un élément réel inline, mais si vous passez à display: inline-block, vous êtes autorisé à définir une largeur. ”( http://www.quirksmode.org /css/display.html#inlineblock ).

De la spécification W3C :

[inline-block] force un élément à générer un conteneur de bloc de niveau en ligne. L'intérieur d'un bloc en ligne est formaté en tant que bloc et l'élément lui-même est formaté en tant que boîte atomique au niveau en ligne.

387
Arnaud Le Blanc

Depuis de nombreuses années, j’utilise un vieux truc que j’ai appris dans certains blogs, je suis désolé de ne pas me souvenir de son nom pour lui donner des crédits.

Quoi qu'il en soit, pour centrer les éléments flottants, cela devrait fonctionner:

Vous avez besoin d'une structure comme celle-ci:

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

l'astuce consiste à laisser float à gauche pour que les conteneurs changent de largeur en fonction du contenu. Than est une question de position: relative et à gauche 50% et -50% sur les deux conteneurs.

La bonne chose est que cela est multi-navigateur et devrait fonctionner à partir de IE7 +.

146
lukart

Centrer les flotteurs est facile. Il suffit d'utiliser le style pour conteneur:

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

changer la marge pour les éléments flottants:

.pagination a{ margin: 0 2px; }

ou

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

et laissez le reste tel quel.

C’est la meilleure solution pour moi d’afficher des menus ou une pagination.

Forces:

  • multi-navigateur pour tous les éléments (blocs, éléments de liste, etc.)

  • simplicité

Faiblesses:

  • cela ne fonctionne que lorsque tous les éléments flottants sont sur une seule ligne (ce qui est généralement correct pour les menus mais pas pour les galeries).

@ arnaud576875 L'utilisation de inline-block fonctionnera très bien (cross-browser) dans ce cas car la pagination ne contient que des ancres (inline), pas de list-items ni de divs:

Forces:

  • fonctionne pour les articles multilignes.

Semaines:

  • espaces entre les éléments du bloc inline - cela fonctionne de la même manière qu'un espace entre les mots. Cela pourrait poser des problèmes pour calculer la largeur du conteneur et les marges de style. La largeur des espaces n'est pas constante, mais elle est spécifique au navigateur (4-5 pixels). Pour supprimer ces lacunes, j’ajouterais au code arnaud576875 (non complètement testé):

    .pagination {Espacement des mots: -1em; }

    .pagination a {Espacement des mots: .1em; }

  • cela ne fonctionnera pas dans IE6/7 sur les éléments de bloc et d'éléments de liste

32
romprzy

Définissez la variable width de votre conteneur dans px et ajoutez:

margin: 0 auto;

référence .

13
AMB

tilisation de 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 -->
9
Santosh Khalse

Je pense que le meilleur moyen consiste à utiliser margin au lieu de display.

C'est à dire.:

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

Vérifiez le résultat et le code:

http://cssdeck.com/labs/d9d6ydif

5
Tarod

IE7 ne sait pas inline-block. Vous devez ajouter:

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

Ajoutez ceci à votre style

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

* Si votre conteneur a une largeur de 50px, mettez 25px, s'il est de 10em, mettez 5em.

1
11-

Vous pouvez également le faire en modifiant .pagination en remplaçant "text-align: center" par deux à trois lignes de CSS pour "left", "transformer" et, selon les circonstances, la position.

.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 -->
1
mwag
<!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>

étape 1

créez deux divs ou plus que vous voulez et donnez-leur une largeur définie comme 100px pour chaque puis laissez-la flotter à gauche ou à droite

étape 2

puis déformer ces deux div dans une autre div et lui donner la largeur de 200px. à cette div appliquer margin auto. boum ça marche plutôt bien. Vérifiez l'exemple ci-dessus.

0
noel jose