À propos de l'utilisation de CSS pour centrer le texte et les images verticalement et horizontalement

À propos de l'utilisation du CSS pour réaliser du texte et des imagescentrage vertical et horizontal

J'ai toujours cru qu'une bonne mémoire n'était pas aussi bonne qu'un mauvais stylo. Récemment, j'ai rencontré beaucoup de centrage vertical pour lequel je vais faire le tri. référence future.

1. Centrez le texte verticalement et horizontalement

1. :

Il n'y a rien à dire sur le centrage horizontal du texte. Cela peut être facilement réalisé en utilisant text-align: center;.

---

2. Centré verticalement :

1) Texte simple sur une seule ligne

　Utilisez line-height==height pour créer un seul texte en ligne Centré verticalement.

1 e388a4556c0f65e1904146cc1a846bee
2     垂直水平居中
3 94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 200px;
3     height: 200px
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;7 }

Pour faire simple, utilisez simplement la balise p, comme ceci

e388a4556c0f65e1904146cc1a846bee垂直水平居中94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;7 
}

L'effet est le suivant :

---

2) Texte multiligne

En utilisant les caractéristiques de l'élément table, l'élément parent au niveau du bloc display: table;inline elementdisplay: table-cell; alignement vertical  : middle ;

(en ligne)

1 8cfb616408c43fb55cbe9d0aaf186081国际《儿童权利公约》界定的儿童系指18岁以下的任何人54bdf357c58b8a65c66d7c19c8e4d114
3 94b3e26ee717c64999d7867364b1b4a3

 1 p{ 
 2     width: 200px; 
 3     height: 200px; 
 4     display: table; 
 5     background:#1AFF00; 
 6 } 
 7 span{ 
 8     display: table-cell; 
 9     vertical-align: middle;10 }

(niveau de bloc)

1 e388a4556c0f65e1904146cc1a846bee
2     e388a4556c0f65e1904146cc1a846bee国际《儿童权利公约》界定的儿童系指18岁以下的任何人94b3e26ee717c64999d7867364b1b4a3
3 94b3e26ee717c64999d7867364b1b4a3

+transform: translationY(-50%);

Positionnement + marge : auto

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background: #00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     transform: translateY(-50%);14 }

Les deux sont à largeur et hauteur fixes . L'élément parent utilise la valeur

padding, qui est la hauteur de l'élément parent moins la hauteur de l'élément enfant

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     margin-top: -32px;
 14 }

Les deux ont une largeur et une hauteur fixes. , l'élément parent utilise

overflow

 : caché ; (css hack) l'élément enfant utilise la valeur de marge, cette valeur est le parent La hauteur de l'élément moins la moitié de la hauteur de l'élément enfant

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 0;
 10     left: 0;
 11     right: 0;
 12     bottom: 0;
 13     margin: auto;
 14     width: 200px;
 15     height: 64px;
 16 }

a l'effet suivant :

　

 1 p{ 
 2     width: 200px; 
 3     height: 64px; 
 4     padding: 68px 0; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     width: 200px; 
 9     height: 64px;
 10 }

p{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background:#00ABFF;
}
p{
    width: 200px;
    height: 64px;
    margin:68px auto;
}

2. Centrer l'image verticalement et horizontalement

---

1. Centrez-le horizontalement

　

1) img est un bloc en ligne dans le paramètre initial de CSS, un élément de bloc en ligne. Si vous souhaitez le centrer horizontalement, utilisez text-align:center;

　2) Définissez display:block pour l'élément img ; convertissez-le en un élément de niveau bloc. Si vous souhaitez le centrer horizontalement, utilisez margin:0 auto;.

2. Centrage vertical

---

　 1 .jpg

Utilisez cette image comme démonstration line-height==height vertical-align : milieu;

　affichage : table-cell;vertical-align : milieu;

affichage : table-cell;vertical-align : milieu ; align: center;

1 e388a4556c0f65e1904146cc1a846bee
2     72e30c8b3aca343ad2e7050cda8f444f
3 94b3e26ee717c64999d7867364b1b4a3

Positionnement+affichage: block;transform: translation(-50%,-50%);

p{
    width: 198px;
    height: 198px;
    text-align: center;
    line-height: 198px;
    border: 1px solid #8900FF;
}
img{
    vertical-align: middle;
}

Positionnement+marge valeur négative

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

　　定位+margin: auto;

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

　　 overflow: hidden;margin值

p{
    width: 198px;
    height: 198px;
    overflow: hidden;
    border: 1px solid #8900FF;
}
img{ 8     margin: 25px;
}

　　padding值

 p{
 2     padding: 25px;
 3     width: 148px;
 4     height: 148px;
 5     border: 1px solid #8900FF;
 6 }

　　用table的属性+vertical-align: middle;实现

1 <p>2     <span><img alt="" src="1.jpg" /></span>3 </p>

p{
    display: table;
    width: 198px;
    height: 198px;
    text-align: center;
    border: 1px solid #8900FF;
}
span{
    display:table-cell;
    vertical-align: middle;
}

　　用background实现

1 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

1 p{
2     width: 198px;
3     height: 198px;
4     border: 1px dashed #8900FF;
5     background: url(1.jpg) no-repeat center center;
6 }

　　效果如下：

　　

 原文来自：http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享！

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!