28172 sujets

CSS et mise en forme, CSS3

Comment centrer une image dans un block

Pages :
Bonsoir,
J'ai un problème qui subsiste même après plusieurs recherches sur le web:
Comment faire pour centrer une image dans un block?
Je m'explique: je voudrait faire un bloc que occupe 15,5% de ma page web et que l'image qu'il contient soit toujours centrée horizontalement et verticalement.
merci d'avance.

voici mon code css:

.element_centre ul
{
margin-left: 2.5%;
margin-top: 1.5%;

background-color:#ffffff;
background: rgba(255,255,255,0.2);
display: block;
-moz-box-shadow: 1px 1px 15px #999;  
-webkit-box-shadow: 1px 15px 1px #999;  
box-shadow: 1px 1px 15px #999; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px; 
float: left;
width:15.5% ;
height: 50%;
}
Administrateur
Hello,

Je n'ai pas de quoi tester ce soir, mais je pense qu'il suffirait d'un display:table-cell sur ton élément (+ un vertical-align: middle) devrait faire l'affaire.

Il faudrait supprimer le float: left, puisque float écrase de toute façon la propriété display (elle est d'ailleurs inutile dans ton code).

Bonne chance.
Re-Bonsoir,
Je suis désolé mais ta solution ne fonctionne pas,
L'image est bien centrée verticalement mais pas horizontalement.
de plus, je n’ai plus aucun moyen de jouer avec width et height.... et je me retrouve avec une box toute disproportionnée. Smiley decu
Voici mon code modifié selon tes conseils:

.element_centre ul
{
margin-left: 2.5%;
margin-top: 3.5%;
background-color:#ffffff;
background: rgba(255,255,255,0.2);
display: table-cell;
vertical-align: middle;
width:15.5% ;
height: 50%;
-moz-box-shadow: 1px 1px 15px #999;  
-webkit-box-shadow: 1px 15px 1px #999;  
box-shadow: 1px 1px 15px #999; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px; 
}
Bonjour Fox-177,

Teste un peu ceci pour voir si c'est ce que tu cherches ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <title>Centrer un élément</title> 
    <style type="text/css"> 
    /*<![CDATA[*/ 
	body {background:#303030;margin:0;padding:0}
    #conteneur { 
        position:relative; /* => À NE PAS OUBLIER <=*/
        margin-left:150px;
		margin-top:100px;
        width:600px; 
        height:500px; 
        background:#F9F8FA;
		
        -moz-box-shadow: 1px 1px 15px #999;  
        -webkit-box-shadow: 1px 15px 1px #999;  
        box-shadow: 1px 1px 15px #999;  
        -moz-border-radius: 8px;  
        -webkit-border-radius: 8px;  
        border-radius: 8px; 
    } 
    .element_a_centrer{ 
        position:absolute; 
        left:50%; 
        top:50%; 
        width:300px; /* largeur de l'image */
        height:206px;  /* hauteur de l'image */
        margin-left:-150px; /* retirer la moitié de l'image */ 
        margin-top:-103px; /* retirer la moitié de l'image */ 
        background-color:#EAEAEA;
		
        -moz-box-shadow: 1px 1px 15px #999;  
        -webkit-box-shadow: 1px 15px 1px #999;  
        box-shadow: 1px 1px 15px #999;  
        -moz-border-radius: 8px;  
        -webkit-border-radius: 8px;  
        border-radius: 8px; 
    } 
        /*]]>*/ 
    </style> 
  </head> 
  <body> 
	<div id="conteneur"> 
		<img 
		src="http://www.miwim.fr/blog/wp-content/uploads/2010/09/poisson_rouge.jpg" 
		class="element_a_centrer" 
		alt="image centrée" 
		/> 
	</div> 
</body> 
</html>

A adapter à ton code bien sûr!
Modifié par lddsoft (03 Jul 2011 - 09:34)
Hello,
Je vous remercie pour vos réponses, après avoir fais un petit mix de vos deux codes, j’obtiens un résultat inattendu mais pas déplaisant...
Il me reste cependant une question (qui s'éloigne un peu du sujet initiale...).
Mon site se compose d ' un bandeau en position fixe et pour le moment d'un corps avec une image centrée dans un bloc. Mon problème est que depuis que j'ai modifié mon code, le bandeau fixe ne s'affiche plus au premier plan ce qui rend inaccessible mes lien d'accès aux pages. Je suis encore novice dans le web design (même si je pense que j'ai des bonnes bases et que je comprend vite quand on m'explique...) et j ai donc du mal a identifier le problème. Merci d'avance.

Voici mon code css de ma première page: (Il doit surement y avoir des erreur a la pelle mais bon sa fonctionne (enfin presque)...)


body
{

background-position: center; 
background-attachment: fixed;
background-repeat: no-repeat;
background: url(fond.jpg) no-repeat center fixed;  
        -webkit-background-size: cover;  
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover; 
-moz-border-radius: 8px; 
  -webkit-border-radius: 8px; 
  border-radius: 8px;
   

}

#Headerfixe
{
position: absolute;
background-image: url("Bandeauwawa.jpg");
background-position: center;
position: fixed;

background-position: center;
width: 100%;
height: 100px;
margin-bottom: 0px;

}


.element_menu
{
margin-top:70px
}
.element_menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;


}
.element_menu li {
float:left;
margin:auto;
padding:0;

background-color:#ffffff;
background: rgba(255,255,255,0.2);


}
.element_menu li a {
display:block;
width:100px;
color:black;
text-decoration:none;
padding:5px;
-moz-box-shadow: 1px 1px 15px #999;  
 -webkit-box-shadow: 1px 15px 1px #999;  
box-shadow: 1px 1px 15px #999; 
-moz-border-radius: 8px; 
  -webkit-border-radius: 8px; 
  border-radius: 8px; 
  

}
.element_menu li a:hover {
color:#808080;
}
.element_menu ul li ul {
display:none;
}
.element_menu ul li:hover ul {
display:block;
}
.element_menu li:hover ul li {
float:none;
}
.element_menu li ul {
position:absolute;
}
.element_menu {
height:50px;
} 



.element_espace h2
{
margin-top: 0px;
visibility: hidden;
}

#corps
{
position: relative;

}



.element_a_centrer 
{
position: absolute;
width:15.5% ;
height: 50%;
margin-left: 3.5%;
margin-top: 0%;

-moz-box-shadow: 1px 1px 15px #999;  
-webkit-box-shadow: 1px 15px 1px #999;  
box-shadow: 1px 1px 15px #999; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px; 

}
.element_centre
{
margin-top: 0px;
width: 100%;
margin-left: 0%;
height: 100%;
margin-bottom: 0px;

  
}
.element_centre h1
{
background-color:#ffffff;
background: rgba(255,255,255,0.2);
text-align: center;
display: block;
-moz-box-shadow: 1px 1px 15px #999;  
 -webkit-box-shadow: 1px 15px 1px #999;  
box-shadow: 1px 1px 15px #999; 
-moz-border-radius: 8px; 
  -webkit-border-radius: 8px; 
  border-radius: 8px; 
height: 50%;
float: right;
width:75%;
margin-right: 2.5%;
margin-left: 1.5%;
margin-top:0px;


}




.element_menugauche
{

}
Bonjour à toutes et à tous,

la question était de centrer une image dans une boite.

Volontairement, l'image a été dimensionnée à width : 200px et height : 150px.
Comme le point de repère est (0;0) de l'image, c'est à dire le top et le left, soit l'angle en haut à gauche, l'astuce est de déplacer ce point au centre de l'image.

D'où --> width : 200px devient margin-left : -100px
et --> height : 150px devient margin_top : -75px

Voici le code HTML + CSS :
<html>
<head>
<title>test</title>
<style type="text/css">
body {
			background-color	: maroon;
}

#boite {
			background-color	: lightyellow;

			position			: absolute;
			top					: 100px;
			left				: 100px;

			width				: 400px;
			height				: 300px;
}

#boite img {
			position			: absolute;
			top					: 50%;
			left				: 50%;

			margin-top			: -75px;
			margin-left			: -100px;

			width				: 200px;
			height				: 150px;
}
</style>
<head>

<body>
<div id="boite">
	<img src="http://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg" alt="Lake Lapourika">
</div>
</body>
</html>


@+
Modifié par Artemus24 (03 Jul 2011 - 14:35)
Positionnement absolu avec marges négative pour centrer une image ? Vous avez pété un câble ? Smiley lol
La solution de Raphaël était parfaite. Pour le centrage horizontal il suffisait d'ajouter text-align: center;

L'autre solution (si on doit être compatible avec IE7) était un simple line-height = hauteur du block + vertical-align: center.

Fox-177 a écrit :

de plus, je n’ai plus aucun moyen de jouer avec width et height.... et je me retrouve avec une box toute disproportionnée. Smiley decu


Quand je vois ton selecteur :


.element_centre ul


Et que tu parles de centrer une image dedans je me dis qu'il y a un problème. Un ul ne peut contenir que des li.
Modifié par jb_gfx (03 Jul 2011 - 15:23)
Bonjour à toutes et à tous,

@iddsoft : je n'ai pas tout lu de ton message. Je l'ai trouvé un peu long. Maintenant que tu me le dis, OUI, je constate que nous avons la même solution à ce problème, et comme tu l'as dit avant moi alors tu as la primauté !

Mes sources sont le livre de "Michel Martin" : XHTML et CSS2 chez Pearson, à la page 261, au chapitre "Centrer une image dans la fenêtre".
"jb_gfx" a écrit :
Positionnement absolu avec marges négative pour centrer une image ? Vous avez pété un câble ? lol

Je suis incapable de dire si telle ou telle solution est la meilleure. L'important pour moi est que la solution soit simple et compréhensible pour tous, même si cela déroge à la norme !

Donc à vous comprendre vous êtes contre la solution proposée dans son livre par Michel Martin ?

@+
en tous cas je trouve dommage que le css ne permette pas de centrer verticalement de façon plus souple, j'ai tenté un 'margin: auto' avec 'display: block' mais ça ne marche que pour le centrage horizontal.

Sinon j'avoue être aussi intriguée : quel type d'image essaye tu de centrer dans tes "li" ?

un padding ne suffirait-il pas ?
Parce que qui dit <ul> dit liste , tu nous parle d'une seule image ....
@Fox-177 > Tu n'aurais pas un peu de code HTML à nous mettre sous la dent, histoire d'y voir un peu plus clair Smiley cligne
Hello tout le monde.
Je vous remercie pour toutes vos réponses.
Je pense qu'il faut que je vous éclairent sur la structure de mon site et de mon code css:
-->.element_menu (ul,li,li a,li a:hover ...) permet de générer un une barre avec des menus déroulants;
-->#Headerfixe génère mon header fixe. Smiley ravi
-->.element_espace h2 ne sert a rien, juste a que #corps ne commence pas sous mon bandeau fixe(c'est de la bidouille mais sa marche...)
-->#corps contient: -.element_a_centrer
- .element_centre

-->.element_a_centrer est la box qui contient mon image qui a fait le titre de mon topic, j'ai repris le nom qu' a donné lddsoft dans son post (qui m'a d’ailleurs bien aidé merci Smiley cligne ) pour faciliter les choses...
-->.element_centre est une zone de texte (pour l'instant vide) avec un titre .element_centre h1
-->.element_menugauche est en cours de développement.

mon code css ne contient donc plus de selecteur .element_centre ul comme l'a fait remarquer jb_gfx que je remercie au passage (erreur que j'ais corriger dans mon post du 03 Jul 2011 - 13:09:31) et mes "li" ne contiennent pas d'images.

Je vous remercie pour toute l'attention que vous portez a mon topic.

Voici mon code html (si vous trouver des erreur ce qui va arriver merci de me les signaler car c'est en corrigeant ses erreurs que l'on apprend...)mon code css n'a pas changé depuis mon post du 03 Jul 2011 - 13:09:31

<html 
   <head>
       <title>Projekt</title>
<link rel="stylesheet" media="screen" type="text/css" title="Projekt" href="design.css" />
</head>


       
   
 
   <body>
   
   <div id="Headerfixe"> 
    <div class="element_Headerfixe"> 
	<ul> 
	
	</ul>
	</div>
	
	<thead>
	<div class="element_menu">
<ul>
<li><a href="Site.html">Startseite</a></li>
<li><a href="#">Seite1</a>
<li><a href="#">Seite2</a>
<ul>
<li><a href="#">Zeitung1</a></li>
<li><a href="#">Zeitung2</a></li>
</ul>
<li><a href="#">Seite3</a>
<ul>
<li><a href="#">Fragen</a>
<li><a href="#">Klassen</a>
<li><a href="#">Infomation</a>
</ul>
</ul>
</div>
</div> 
</thead>
  
  
  <div id="espace">
  <div class="element_espace">
  
  <h2> Willkommen  </h2>
  <h2> Willkommen  </h2>
  <h2> Willkommen  </h2>
  
  </div>
  </div>
  
  <div id="corps">
  <img src= "2.jpg"
  class="element_a_centrer"  
  alt="image centrée"  
  />
  
  <div class="element_centre">
  <h1> Willkommen  </h1>
  

  </div>

  </div>
  
   </body>
</html>


Mon site est en allemand car je suis actuellement en Allemagne et que il est destiné a être lu par des allemands.
Modifié par Fox-177 (03 Jul 2011 - 20:32)
Quel doctype ?

En outre, tu devrais ajouter par exemple 
z-index:10;
à 
.element_menu ul { ...}
pour que les items passent au 1er plan par rapport à l'image.

De plus : bienvenue = Willkommen (avec 2 L Smiley cligne )
Modifié par lddsoft (03 Jul 2011 - 20:19)
Pour être franc je ne me suis encore jamais posé la question de quel doctype il fallait que j'utilise mais je sais que sa influe sur l'affichage du code. Smiley confus
Lequel me conseillerais tu sachant que j' utilise du css3 et du html je ne sais pas combien?
Et merci pour z-index: 10; sa fonctionne au top (décidément je n’arrêterais jamais de te remercier Smiley ravi )
Pour les mercis : de rien, de rien, de rien (avec plaisir)

Doctype : <!DOCTYPE html> (pour le HTML 5 en utilisant du CSS3, mais il va falloir potasser la sémantique de html5 et le CSS3 !!!)
Alors là tu m’excusera mais j'ai pas tout compris Smiley ravi .
Sa veux dire quoi "il va falloir potasser la sémantique de html5 et le CSS3"?
Pour le doc type j'ai vu dans mes recherche gogole qu'il fallait une url propre a chaque langage du genre <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" pour le HTML 4.01 Strict,
"http://www.w3.org/TR/html4/strict.dtd">
Transitional, Frameset
source:http://www.pompage.net/traduction/doctype
bonsoir,

petit rappel en passant:

1) centrage horizontal:
text-align:center;
Sur le parent pour centrer des contenus de type : texte, inline et inline-block(inline-block, c'est le comportement de certains element de formulaire et des images).
margin:auto;

centre alors des element de type block qui ont une largeur definies, les tableaux ou element formaté en display:table par exemple (*) Smiley smile .

2) centrage vertical:
vertical-align:middle;


Va aligner 2 élément de type inline en leur centre vertical avec comme référence la position de l'interligne(baseline) : 2 images cote a cote et de taille différentes, une ou plusieurs images dans du texte, de éléments de formulaires , .... ou les uns et les autres précités.

Au sein d'une cellule de tableau (ou d'un élément formaté comme tel via display) si la hauteur du contenu est inferieur a la hauteur de l’élément parents. (autrement dit sans hauteur et en presence d'une cellule ou d'un élément seul, celui-ci s'adapte a son contenu).

X)en final :
td ou display : table-cell + width + height + text-align + vertical-align vont te permettre de centrer horizontalement et verticalement un élément de type inline ou inline-block dans un parent de taille supérieur a celui-ci.

Pour un élément de type block, ce sera : margin:auto; pour le centrage horizontal.

P.S. IE7 et moins ne comprennent pas display:table et Cie. (une piste est évoquée dans les post précédents)

En sortant de ces considérations/régles ou en les ignorants ça ne marchera pas ou mal.
La technique des marges négatives et du positionnement absolu requiert une maitrise des effets de bords(superposition, disparition) car le ou les éléments ne suivent plus le flux naturel du document et positionnement a l’écran.

L'une ou l'autre des méthodes demande un minimum de maitrise et de réflexion. il n'y a pas de "recettes magiques" Smiley smile et elle ne se mélange pas vraiment.

Cordialement

P.S.
(*) centrage horizontal avec td ou display:table; On fera usage du margin:auto pour centré l’élément et éventuellement d'un text-align:center; pour centrer son contenu , en particulier si une largeur est definie.

Comprendre ou connaitre les regles permettent de choisir la technique la mieux adaptée a un "probleme".
Modifié par gc-nomade (03 Jul 2011 - 22:16)
Bonsoir à toutes et à tous,

voici comment centrer une image en JavaScript ! C'est très simple et cela fonctionne partout !
<html>
<head>
<title>test</title>
<script type="text/javascript">
function centrage(node)
{
	node.style.marginTop  = parseInt(node.parentNode.clientHeight/2) - parseInt(node.clientHeight/2) + "px";
	node.style.marginLeft = parseInt(node.parentNode.clientWidth/2)  - parseInt(node.clientWidth/2)  + "px";
}
</script>
<style type="text/css">
* {
			margin				: 0;
			border				: none;
			padding				: 0;
}

body {
			background-color	: maroon;
}

#boite1 {
			background-color	: yellow;

			position			: absolute;
			top					: 50px;
			left				: 100px;

			width				: 400px;
			height				: 200px;
}

#boite2 {
			background-color	: blue;

			position			: absolute;
			top					: 100px;
			right				: 200px;

			width				: 200px;
			height				: 500px;
}

#boite1 img {
			width				: 100px;
			height				: 85px;
}

#boite2 img {
			width				: 100px;
			height				: 85px;
}
</style>

</head>

<body>
<div id="boite1">
	<img onload="centrage(this);" src="http://dc27.4shared.com/download/21869065/8d83e5f2/willkommen_bouquet_fleurs_jaune_et_rouge_texte.gif" alt="Willkommen !" />
</div>

<div id="boite2">
	<img onload="centrage(this);" src="http://dc27.4shared.com/download/21869065/8d83e5f2/willkommen_bouquet_fleurs_jaune_et_rouge_texte.gif" alt="Willkommen !" />
</div>
</body>
</html>


@+
Pages :
Sujet clos
Aller à