Comment centrer un div en CSS pour afficher une image

Méthode CSS pour centrer un div pour afficher une image : 1. Utilisez l'attribut margin de l'image pour centrer l'image horizontalement, code tel que "margin:0 auto;" 2. Utilisez l'attribut padding de le div pour centrer l'image verticalement, le code tel que "padding-top:50px;".

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3, version HTML5&&CSS3.

Comment centrer l'image dans un div en utilisant du CSS ?

Comment centrer l'image dans le div

Utilisez l'attribut margin de l'image pour centrer l'image horizontalement, et utilisez l'attribut padding du div pour centrer l'image verticalement.

Le code de structure est le même que ci-dessus ;

le code CSS est le suivant :

div {
width:300px;
height:150px; 
background-color:#eee; 
padding-top:50px; 
border:#000 1px solid;
}
 
img {display:block; margin:0 auto;}

Remarque :

img est un élément en ligne, et vous il est nécessaire de définir son attribut margin pour le centrer. Il est nécessaire de le convertir en élément de bloc display:block; puis d'utiliser margin:0 auto pour obtenir un centrage horizontal de l'image (Certains concepteurs ajoutent une balise div à l'image ; , puis utilisez la marge de la balise div pour réaliser le centrage

Idée : utilisez l'attribut text-align pour centrer l'image horizontalement, puis définissez la valeur de padding-top pour la centrer verticalement. comme suit :

<style type="text/css">
 div{
  width:180px;
  height:180px;
  border:1px solid #000;
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
 }
 div p{
  position:static;
  +position:absolute;
  top:50%;
 }
 div img{
  position:static;
  +position:relative;
  top:-50%;
  left:-50%;
 }
 </style>
 
<div><p><img src="0225/12986229678396.jpg" width="120" height="120"></p></div><br>
<div><p><img src="0225/12986229678396.jpg" width="160" height="160"></p></div>

Méthode 2

<div>
<img src="images/tt.gif" width="150" height="100" />
</div>
css样式如下：
div {
width:300px; 
height:150px;
background-color:#ccc; 
border:#000 1px solid; 
text-align:center; 
padding-top:50px;
}

(Recommandé :

tutoriel vidéo CSS

)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!