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: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01