Comment centrer les éléments flottants?


356

J'implémente la pagination, et elle 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;ça ne marche pas. Je pourrais y parvenir en donnant le rembourrage div wrapper de gauche, 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:

texte alternatif


Le but de la propriété float est de positionner un élément le long du côté gauche ou droit de son conteneur.
Rob

3
@Rob: Eh bien, je devais définir la largeur et la hauteur des éléments de lien, ce qui ne peut être fait que sur les éléments de bloc, mais lorsque vous faites le bloc de liens, ils se propagent sur une nouvelle ligne chacun, c'est pourquoi je les ai fait flotter.
Mike

Solution alternative, lorsque vous ne voulez pas / ne pouvez pas utiliser le bloc en ligne. stackoverflow.com/questions/1232096/…
hakunin

1
Je crois que cette question mérite l'attention du modérateur car son titre actuel et ses réponses sont trompeurs. La question ne concerne pas le contenu flottant au centre, mais le centrage du contenu. Flottant signifie que le contenu frère non flottant devrait combler les lacunes restantes et ce n'est clairement ni souhaité ni atteint ici.
tao

8
@AndreiGheorghiu si vous pensez cela, suggérez une modification au lieu de la signaler pour les mods. N'importe qui peut modifier ces questions. Modifiez donc la question et écrivez une explication détaillée dans le motif de la modification. C'est quelque chose que tout utilisateur peut faire, il n'est pas nécessaire qu'il soit modérateur. Il n'y a rien de mal avec la question ou les réponses qui nécessitent une intervention du modérateur
Zoe

Réponses:


407

La suppression de floats et son utilisation inline-blockpeuvent 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 +.)

inline-block fonctionne sur plusieurs navigateurs, même sur IE6 tant que l'élément est à 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 est lorsque vous souhaitez donner une largeur à un élément en ligne. Dans certaines circonstances, certains navigateurs n'autorisent pas de largeur sur un élément réel en ligne, mais si vous passez à l'affichage: bloc en ligne, vous êtes autorisé à définir une largeur. » ( http://www.quirksmode.org/css/display.html#inlineblock ).

De la spécification W3C :

[inline-block] fait qu'un élément génère un conteneur de bloc de niveau inline. L'intérieur d'un bloc en ligne est formaté comme une zone de bloc et l'élément lui-même est formaté comme une zone atomique de niveau en ligne.


10
Astuce: N'oubliez pas l'alignement vertical.
Synexis

5
Oui, c'est l'un des rares cas où j'ai constaté que l'alignement vertical fait ce que vous attendez.
Mike Turley

4
L'inconvénient de cette méthode est qu'il est difficile de contrôler l'espacement horizontal, car des espaces peuvent apparaître entre les éléments.
Xavier Poinas

@XavierPoinas: utilisez la taille de police: 0; sur le parent pour résoudre ce problème
roelleor

Gardez à l'esprit que la "taille de police: 0" ne fonctionnait pas sur les appareils Android. Je ne sais pas si cela est toujours vrai pour les versions récentes.
Andreas Baumgart

150

Depuis de nombreuses années, j'utilise un vieux truc que j'ai appris dans un blog, je suis désolé de ne pas me souvenir du 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 flotter à gauche pour que les conteneurs changent la largeur en fonction du contenu. C'est une question de position: relative et laissé 50% et -50% sur les deux conteneurs.

La bonne chose est que c'est un navigateur croisé et devrait fonctionner à partir d'IE7 +.


1
Un rappel que cela fonctionne s'il n'y a qu'un seul élément flottant.
Wtower

Le problème avec ceci est qu'une barre de défilement horizontale apparaîtra car la div externe s'étend au-delà de l'écran. De plus, lorsque la liste passe à une autre ligne, le tout est aligné à gauche.
cleversprocket

Cela ne fera aucune différence sans définir la largeur maximale du conteneur, margin: 0 auto;fait mieux dans ce cas
Murhaf Sousli

1
Pour moi, float: left;n'était pas nécessaire sur .main-containeret .fixer-container.
csum

@cleversprocket J'ai résolu le défilement horizontal en enveloppant tout dans une seule div avecoverflow: hidden;
csum

36

Le centrage des flotteurs est facile . Utilisez simplement le style de 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 choses comme les menus ou la pagination.

Forces:

  • cross-browser 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 d' éléments de bloc en ligne fonctionnera très bien (cross-browser) dans ce cas car la pagination ne contient que des ancres (en ligne), aucun élément de liste ou div:

Forces:

  • fonctionne pour les éléments multilignes.

Weknesses:

  • les espaces entre les éléments de bloc en ligne - cela fonctionne de la même manière qu'un espace entre les mots. Cela peut entraîner des problèmes de calcul de la largeur du conteneur et des marges de style. La largeur des espaces n'est pas constante mais elle est spécifique au navigateur (4-5px). Pour me débarrasser de ces lacunes, j'ajouterais au code arnaud576875 (non entièrement testé):

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

    .pagination a {word-spacing: .1em; }

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


affichage: le tour de table est incroyable a juste fait tout comme il se doit avec seulement quelques lignes. Je dois m'en souvenir. Vive
kilop

La technique du bloc en ligne fonctionne extrêmement bien. Heureusement, les éléments que j'utilise (éléments div imbriqués) pour cela peuvent bien combler l'écart.
karolus

Vous pouvez également supprimer les lacunes du bloc en ligne en réduisant la taille de la police à zéro, puis en rétablissant votre valeur précédente dans les éléments enfants
Mike Causer

15

Réglez votre conteneur de widthdans pxet d' ajouter:

margin: 0 auto;

Référence .


1
pour moi, c'est la meilleure réponse: P.
alansiqueira27

3
Cela ne fonctionnerait que si la largeur du conteneur est appropriée, ce qui est le problème lorsqu'elle contient des éléments flottants.
Wtower

11

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


5

Je pense que la meilleure façon est d'utiliser marginau 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


1
Fonctionne avec juste marge: auto; au lieu des propriétés individuelles gauche et droite aussi.
cellepo



1

Ajoutez ceci à votre style

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

* Si la largeur de votre conteneur est de 50px, mettez 25px, si elle est de 10em, mettez 5em.


1

Vous pouvez également le faire en changeant .paginationen remplaçant "text-align: center" par deux à trois lignes de CSS pour la gauche, la transformation 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 -->


0
<!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 ou plusieurs div que vous voulez et donnez-leur une largeur définie comme 100px pour chacun, puis faites-la flotter à gauche ou à droite

étape 2

puis déformez ces deux div dans un autre div et donnez-lui la largeur de 200px. à cette div, appliquer la marge automatique. boum ça marche plutôt bien. vérifiez l'exemple ci-dessus.


-1

Ajout juste

left:15%; 

dans mon menu css de

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

a fait le tour de centrage aussi


4
15% est tout à fait arbitraire.
Wtower
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.