align = "center" solution de contournement

Question

J'utilise un modèle que je n'ai pas créé moi-même pour un site Web basé sur Joomla. J'essaye de centrer un menu de jquery et ai passé des heures à passer par tout le code et le CSS et ne peux pas sembler savoir comment le faire! J'ai donc décidé de créer un peu de travail. J'ai fait une image png vide et l'ai mise à la gauche du menu et ai fait sa largeur égale au décalage que je veux. Ce petit hack fonctionne bien, sauf que tous les écrans n'ont pas la même taille et ne sont donc pas centrés sur la plupart des écrans. Je me demandais si quelqu'un connaissait une manière dynamique de calculer exactement ce qu'est le centre afin que je puisse changer dynamiquement la largeur du png blanc quand la page se charge?

espoir qui fait sens et toute aide serait grandement appréciée

Answer 1

CSS Pour Centrer un élément:

#elementID { 
    margin: 0 auto; 
} 

Je lis dans des endroits que l'élément a besoin d'avoir l'ensemble de propriétés CSS width pour que cela prendre effet, mais j'ai constaté que ce n'est pas toujours le cas.

Answer 2

Que diriez-vous

margin-left: auto; 
    margin-right: auto; 

Answer 3

Soit:

margin-left: auto; 
margin-right: auto; 

Ou

margin: 0 auto; 

fonctionnera. :)

Answer 4

La manière classique de centrer un élément à l'aide de CSS est avec margin-left:auto; margin-right:auto;.

De plus, l'élément doit être affiché en bloc et avoir une largeur fixe.

Ainsi, votre CSS ressemblerait à quelque chose comme ceci:

.myelement { 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
    width:100px; 
} 

espoir qui aide.

Answer 5

tandis que

margin:0 auto

fonctionne avec le conteneur principal du site (le parent de ce conteneur est le corps), il devient un peu fade quand vous l'avez à l'intérieur des conteneurs, comme je le fais.

essayer quelque chose comme ça puisque vous savez la largeur:

#selector{ 
    width:500px; /* however wide the element is */ 
    position:absolute; 
    top:20px; /* This is whatever you want */ 
    left: 50%; 
    margin-left:-250px; /* this is half of the width */ 
}

Answer 6

Essayez d'inspecter le code CSS avec Firebug ou chrome, puis ajoutez un enregistrement css qui change l'élément que vous voulez

Answer 7

lieu dans div un emballage div

<div id = "mainWrapper"> 

    <div id = "leftColumn"></div><!-- end leftColumn --> 

    <div id = "centerColumn"> 
    <!-- Put you menu item in here --> 
    </div><!-- end centerColumn --> 

    <div id = "rightColumn"></div><!-- end rightColumn --> 

</div><!-- end main wrapper --> 

comme suit css #mainWrapper { float: left; largeur: 100%; } #leftColonne { flotteur: gauche; largeur: 25%; } #centerColumn { float: left; largeur: 50%; } #rightColumn { float: à gauche; largeur: 25%; }