Comment centrer les images CSS-tutoriel HTML-php.cn

Comment centrer les images CSS

php中世界最好的语言

Libérer： 2018-05-15 14:43:37

original

8071 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Lecture recommandée :

Utiliser CSS pour implémenter une barre de progression circulaire

Animation d'ondulation CSS

Que dois-je faire si la page Web est iframe ?

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!