Mon formulaire Web est assez simple. Il doit avoir trois lignes d'éléments texte/ASP.NET. La page principale a un en-tête et un pied de page. Je dois centrer ces trois lignes au milieu de la page verticalement et horizontalement, surtout si le fond change. Comment est-ce que je fais cela avec CSS?ASP.NET + CSS - Comment centrer les éléments au milieu de la page Web verticalement et horizontalement?
Répondre
L'alignement horizontal des objets est simple. Si l'élément a un fixe avec lui donner le CSS suivant:
.element
{
margin: 0 auto;
}
Cela indique l'élément d'avoir 0 haut et en bas et auto marin-calculer la marge à gauche et à droite.
Il existe un moyen de centrer verticalement les éléments appelés dead center. Il utilise un décalage de 50% du haut de la page et une marge négative pour amener le contenu au centre (verticalement). L'inconvénient est que votre élément a besoin d'une taille fixe (hauteur et largeur).
Dans votre page maître, vous voulez un conteneur et un centre, alors vous aurez besoin d'un div pour le contenu principal. le code brut serait quelque chose comme:
<div id="center">
<div id="main">
<p>This text is perfectly vertically and horizontally centered.</p>
</div><!-- end #main -->
</div><!-- end #center -->
<style>
#center { position: absolute; top: 50%; width: 100%; height: 1px; overflow: visible }
#main { position: absolute; left: 50%; width: 720px; margin-left: -360px; height: 540px; top: -270px }
</style>
Ceci utilise la même approche que celle proposée par Damien. Il a tendance à être le seul moyen d'accomplir avec CSS seul. Vous pouvez probablement mieux résoudre cela avec l'utilisation de JavaScript/jQuery.
J'avais espoir pour cela. Il fonctionne avec une seule ligne de texte mais quand j'en ajoute plus, il "saigne" dans le pied de page de la page maître. –
Changes Successfully Submitted
Please note the Record ID below for your records
@schenz, votre logique n'a pas ni redimensionné à différents navigateurs. – kobe
C'est ce qui a fonctionné pour moi:
<style type="text/css">
.auto-style1 {text-align:center;}
</style>
ceci n'adressera pas le centrage vertical –
Quels navigateurs soutenez-vous? Si IE5/6 alors la seule solution pratique non-javascript est l'affreux hack de cellules de table unique. – Keith
Seulement IE8 et rien d'autre –