centrer un div sans définir la largeur

Y a-t-il un moyen de le faire? Lors de l'utilisation de la navigation qui peut changer le nombre d'éléments souvent, il serait bien de ne pas avoir à calculer le avec et mettre à jour le css, mais juste avoir une solution qui fonctionne.centrer un div sans définir la largeur

si c'est impossible (je suppose que c'est) quelqu'un peut-il me diriger vers un javascript qui peut le faire?

modifier

re: Code de fournir un code essentiellement je travaille, ce que je pense est la configuration la plus typique

<div class="main"> 
<div class="nav"> 
    <ul> 
    <li>short title</li> 
    <li>Item 3 Long title</li> 
    <li>Item 4 Long title</li> 
    <li>Item 5 Long title</li> 
    <li>Item 6 Extra Long title</li> 
    </ul> 
</div> 
</div>

modifier

.main { 
width:100%; 
text-align:center; 
} 
.nav { 
margin:0 auto; 
} 
.nav ul li { 
display:inline; 
text-align:left; 
}

la question que j'ai trouvé cette/ces solutions est que le contenu est poussé du coude à droite ajoutant un peu de rembourrage droit (de 40px) semble résoudre ce problème à travers les navigateurs je vérifie sur (O FF IE). .nav { marge: 0 auto; rembourrage-droit: 40px; } Je ne sais pas d'où vient cette valeur et pourquoi 40px corrige cela.

Est-ce que quelqu'un sait d'où cela vient? ce n'est pas une marge ou un rembourrage, mais peu importe ce que je fais le premier à propos de 40px ne peut pas être utilisé pour le placement. Peut-être que c'est le ul ou li qui ajoute ceci.

J'ai eu un coup d'oeil à l'écran: chemin de table cellule de le faire, mais il y a cette complication avec IE et il a toujours le même problème que l'autre solution

modifier (finale

okay J'ai essayé certaines choses en ce qui concerne le retrait. J'ai remis à zéro tout le rembourrage à 0

*{padding:0;}

qui a fixé, et je ne ont pas besoin de compenser le rembourrage (je pense que je vais laisser mon processus jusqu'à si quelqu'un vient à travers cela, il « ll sauver un certain temps)

Merci pour les commentaires et les réponses

Source

2009-11-29 Daniel

Il est difficile de répondre à cette question sans savoir ce qu'il y a dans votre DIV. Il semble que, comme condition préalable, vous devez faire votre largeur élastique (table) DIV au lieu de la largeur de bloc par défaut. Et c'est une toute autre question. – jpsimons

Pouvez-vous fournir le HTML \ CSS que vous utilisez avec votre question? Si la solution implique Javascript, nous sommes en difficulté ... –

En utilisant la solution que j'ai listée ci-dessous, il n'y a pas de problèmes de remplissage supplémentaire ... J'utilise des entrées pour simuler le menu ... donc cela peut indiquer que l'UL le style ajoute le rembourrage. – PortageMonkey

<div class="nav"> 
<ul> 
    <li>menu 1</li> 
    <li>menu 2</li> 
    <li>menu 3</li> 
</ul> 
</div> 

<style> 
.nav { text-align:center; } 
.nav ul { display:inline-table;} 
.nav ul li {display:inline;} 
</style>

C'est tout,

Changer le nombre de li, mais ul sera toujours aligné au centre

faire div class = "nav" lieu ul intérieur, ul seront aligné au centre toujours

Source

2012-08-29 20:02:25 Dashrath

un ajout que j'ajouterais (bien que cela se passe d'explication) consiste à ajouter 'padding-left: 0;' à '.nav ul', il n'y a pas de reset css utilisé – Daniel

jsbin.com/awejuk/1/ – Daniel

~~Si vous voulez centrer une div dans son conteneur, la marge gauche et essayez de définir la marge droite du conteneur à l'auto.~~

Il semble que quelqu'un ait eu le même problème que vous. J'espère que c'est mieux que ma première recommandation. :)

http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap

Source

2009-11-29 04:06:13

la largeur doit être définie pour que cela fonctionne. – carillonator

Ah, oui. Mon erreur. Maintenant, je comprends pourquoi cette question a été posée en premier lieu. –

+1 pour le lien informatif. Bon produit. Bookmarked! –

D'après ce que je crois que vous demandez, vous voulez centrer une div dynamique, étant donné que la largeur change en fonction de nombre d'éléments de menu sont visibles.Je suppose que vous aimeriez aussi que cela se centre de façon dynamique sur le redimensionnement. Cela peut être fait avec un simple javascript comme indiqué ci-dessous. J'ai mocké un exemple que vous pouvez jouer avec, fonctionne dans IE et FF. Le javascript est la clé. A noter également, bien que ne faisant pas partie de votre question, il peut être judicieux de contrôler la largeur minimale sur le redimensionnement ... ping-moi si vous rencontrez cela.

<html> 
<head runat="server"></head> 
<body onload="centerMenu()" onresize="centerMenu()"> 
<form id="form1" runat="server"> 
    <div id="menuWrapper" style="display:inline; height:20px;"> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
    </div> 
</form> 
<script type="text/javascript"> 
function centerMenu() 
{ 
    //Wrap your menu contents in a div and get it's offset width 
    var widthOfMenu = document.getElementById('menuWrapper').offsetWidth; 
    //Get width of body (accounting for user installed toolbars) 
    var widthOfBody = document.body.clientWidth; 
    //Set the width of the menu Dynamically 
    document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu))/2; 
} 
</script> 
</body> 
</html>

Source

2009-11-29 07:32:52 PortageMonkey

Que diriez-vous

#form1 {text-align:center} 
    #menuWrapper{display:inline-block;text-align:left}

En outre, il woudl être plus accessible pour marquer votre menu comme suit:

<form id="navWrapper"> 
    <ul> 
     <li><input></input></li> 
     ... 
    </ul> 
</form>

et utiliser

#navWrapper {text-align:center} 
    #navWrapper ul {display:inline-block;text-align:left} 
    #navWrapper li {display:inline}

Source

2009-11-29 10:47:42 wheresrhys

difficile de dire sans voir exactement ce que vous essayez de réaliser mais cela devrait au moins aider ...

Votre CSS

#main { 
    width:100%; 
    text-align:center; 
} 

#nav { 
    margin:0 auto; 
} 

#nav ul li { 
    display:inline; 
} 

#content { 
    text-align:left; 
}

Votre HTML

<div id="main"> 
    <!-- Your Navigation Menu --> 
    <div id="nav"> 
     <ul> 
      <li>Nav 1</li> 
      <li>Nav 2</li> 
      <li>Nav 3</li> 
     </ul> 
    </div> 
    <!-- Your Content Area --> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur ... 
    </div> 
</div>

Source

2009-11-29 14:25:22 luckykind

cela fonctionne (dans une certaine mesure :) Cela ne fonctionne pas où je l'ai prévu, mais je vais devoir parcourir les fichiers CSS pour voir s'il y a des conflits. Mais le degré se réfère au centrage. Il centre le côté gauche du contenu, de sorte que le centrage est un peu éteint. J'ai essayé d'ajouter un remplissage de 40px sur la droite à l'intérieur de #nav, mais cela signifie ajouter une valeur statique à l'équation.Bien que le 40px fonctionne, en fonction de la taille des éléments, il aura tendance à pendre d'un côté ou de l'autre – Daniel

ouais ... comme je l'ai dit c'est difficile à dire sans voir exactement ce que vous faites ... mais ça sonne un conflit avec un autre style ... ça marche vraiment bien, et vous voulez éviter d'ajouter des valeurs statiques si vous essayez de centrer quelque chose. Essayez d'ajouter temporairement "border: 1px red red;" aux zones de problèmes afin que vous puissiez mieux voir comment il se présente ... – luckykind

ici une solution agréable pour centering a div with no width.

est sans tableur et fonctionne dans n'importe quel navigateur!

(EDIT: lien mort remplacé par un de archive.org BTW, la technique décrite il y a:.. Enveloppez votre DIV dans un SPAN pour le faire en ligne)

Source

2010-05-14 01:59:20 Snowalker

Note: Le lien (référence) fourni n'est plus disponible. –

centrer un div sans définir la largeur

Répondre

Questions connexes