Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

centrage horizontal et vertical en HTML/CSS

Voici quelques astuces qui vous permettront de centrer des éléments en CSS/HTML. Tout d'abord il faut bien faire la différence entre élément inline et élément block : Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne [Alsacreations]

Centrage horizontal d'un élément inline dans un élément block :
utilisation de la propriété CSS text-align:center;

<div style="width:200px;border:solid 1px #000;text-align:center"> texte centré horizontalement </div>

Centrage horizontal d'un élément block dans un élément block :
utilisation de la propriété CSS margin:auto;

<div style="width:200px;border:solid 1px #000;"> <div style="margin:auto;border:solid 1px #F0F;width:50px;"> block centré horizontalement </div> </div>

Centrage vertical d'un élément inline dans un élément block :
utilisation des propriétés CSS height et line-height

<div style="height:10em;border:solid 1px #0F0;line-height:10em;"> texte centré verticalement </div>

A noter que la propriété vertical-align permet seulement de centrer 2 éléments inline ou table-cell entre eux, généralement une image avec du texte.

Centrage vertical d'un élément block dans un élément block :
Il n'existe malheureusement pas de solution fiable pour centrer horizontalement un élément block dans un élément block. Si vous conaissez la hauteur de l'élément à centrer, vous pouvez jouer avec la propriété margin pour le centrer.

<div style="height:200px;border:solid 1px #000;"> <div style="border:solid 1px #F0F;height:50px;margin:75px 0;"> block centré verticalement </div> </div>

Mais si vous ne connaissez pas les hauteurs, la solution consiste à passer par un tableau ...

<table style="border:solid 1px #0F0;"> <tr> <td valign="middle" style="height:200px;"> <div style="height:5em;border:solid 1px #000;"> block centré verticalement </div> </td> </tr> </table>

 On peut quand même forcer le type de la balise en table-cell mais IE (6 et 7) ne comprennent pas cette propriété :

<div style="height:200px;border:solid 1px #000;display:table-cell;vertical-align:middle;"> <div style="border:solid 1px #F0F;height:50px;"> block centré verticalement </div> </div>
Posted: vendredi 14 septembre 2007 00:30 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

sebmafate a dit :

euh... ca ne serait pas "Centrage vertical d'un élément block dans un élément block : " dans le dernier titre en gras ???

# septembre 14, 2007 08:47

cyril a dit :

oups, merci :p

# septembre 14, 2007 09:25

Alexandre Marlot a dit :

Si je comprends bien il n'est donc pas possible de center verticalement un div au milieu d'une page (en fonction de la taille de l'écran?)

# septembre 14, 2007 09:25

sebmafate a dit :

non ce n'est pas possible... il y avait un hack avant... mais je ne suis pas sur qu'il fonctionne encore. Il s'agissait de définir une taille au html et au body.

html, body {height:100%;}

Mais ça reste du bricolage.

# septembre 14, 2007 14:58

cyril a dit :

Alexandre : c'est possible mais seulement si tu connais la taille de ton élément à centrer.

.tonElement {

  position:absolute;

  top:50%; /* on met le haut à la moitié de l'écran */

  margin:auto;

  margin-top : -100px; /* on remonte l'élément de la moitié de la hauteur de ton élément */

}

il reste possible de récuperer la taille d'un élément pendant l'execution via javascript grâce à offsetHeight. Par extension on peut utiliser une expression css (pour IE seulement)

margin-top: expression((-document.getElementById('elementID').offsetHeight) + 'px');

et la bidouille des display:table-cell pour FF

mais bof, dans ce cas mieux vaut le faire en js :p

# septembre 14, 2007 15:30

Kadheus a dit :

Personnellement, j'ai opté pour une solution JS pour centrer verticalement un conteneur dans un autre :

http://www.riatoolbox.com/2007/08/30/aligner-verticalement-un-conteneur/

Have fun ^^

# septembre 14, 2007 22:29
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Nettoyage des versions de List Item avant migration depuis SharePoint On Premise vers SharePoint Online par Blog Technique de Romelard Fabrice le 08-08-2017, 15:36

- Office 365: Comment supprimer des éléments de liste SharePoint Online via PowerShell par Blog Technique de Romelard Fabrice le 07-26-2017, 17:09

- Nouveau blog http://bugshunter.net par Blog de Jérémy Jeanson le 07-01-2017, 16:56

- Office 365: Script PowerShell pour assigner des droits Full Control à un groupe défini par Blog Technique de Romelard Fabrice le 04-30-2017, 09:22

- SharePoint 20XX: Script PowerShell pour exporter en CSV toutes les listes d’une ferme pour auditer le contenu avant migration par Blog Technique de Romelard Fabrice le 03-28-2017, 17:53

- Les pièges de l’installation de Visual Studio 2017 par Blog de Jérémy Jeanson le 03-24-2017, 13:05

- UWP or not UWP sur Visual Studio 2015 ? par Blog de Jérémy Jeanson le 03-08-2017, 19:12

- Désinstallation de .net Core RC1 Update 1 ou SDK de Core 1 Preview 2 par Blog de Jérémy Jeanson le 03-07-2017, 19:29

- Office 365: Ajouter un utilisateur ou groupe dans la liste des Site collection Administrator d’un site SharePoint Online via PowerShell et CSOM par Blog Technique de Romelard Fabrice le 02-24-2017, 18:52

- Office 365: Comment créer une document library qui utilise les ContentTypeHub avec PowerShell et CSOM par Blog Technique de Romelard Fabrice le 02-22-2017, 17:06