Maison > Article > interface Web > Comment centrer les images CSS
Comment centrer les images CSS
- php中世界最好的语言original
- 2018-05-15 14:43:378099parcourir
Nous rencontrons souvent cette situation dans les projets. Il existe de nombreuses façons de faire apparaître l' image au centre, mais la plus recommandée est d'utiliser CSS pour faire fonctionner DIV, je vais donc vous la présenter. ci-dessous. Deux méthodes, utilisez les opérations CSS pour centrer l'image.
Tout d'abord, laissez l'objet DIV dans l'image être centré horizontalement dans la boîte, ce qui est le même CSS que d'avoir la police de texte centrée horizontalement dans la boîte DIV.
CSS pour centrer le contenu de l'objet. Le mot de style est :
text-align :center
text-align est la position du contenu dans l'objet. la valeur centrale est centrée
1. La méthode HTML traditionnelle pour centrer l'image horizontalement et horizontalement consiste à ajouter directement "align="center"" à l'objet étiquette pour afficher l'image dans l'objet horizontalement et centré horizontalement. Ajoutez "align="center"" directement dans l'objet étiquette pour afficher l'image dans l'objet horizontalement et centrée.CSS pour centrer l'objet DIV dans l'image horizontalement
align="center"使用方法： <p align="center"></p> align="center"居中图片DIV+CSS实例代码： <!DOCTYPE > <html xmlns="http://www.php.cn"> <head> <meta charset="utf-8" /> <title>图片横向居中</title> </head> <body> <p align="center"><img src="http://www.php.cn" /></p> </body> </html>2. Utilisez les styles CSS pour centrer l'image dans le DIV (centrée horizontalement)
HTML+CSS Le code complet est le suivant :
Nous pouvons utiliser les deux méthodes ci-dessus pour savoir si le texte est centré, l'image est centrée, etc. Il est généralement recommandé d'utiliser CSS, mais souvent sur les pages web, il suffit de modifier le fichier CSS. Correspondant à un style de sélecteur, vous pouvez modifier le contenu pour qu'il soit centré, à gauche ou à droite.
<!DOCTYPE >
<html xmlns="http://www.php.cn">
<head>
<meta charset="utf-8" />
<title>图片横向居中</title>
<style>
.pcss5{text-align:center}
</style>
</head>
<body>
<p class="pcss5"><img src="http://www.php.cn" /></p>
</body>
</html>Lecture recommandée :
Utiliser CSS pour implémenter une barre de progression circulaire
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!