Une brève discussion sur le centrage horizontal du traitement CSS-tutoriel CSS-php.cn

Une brève discussion sur le centrage horizontal du traitement CSS

高洛峰

Libérer： 2017-03-02 15:44:05

original

1412 Les gens l'ont consulté

L'éditeur suivant vous apportera une brève discussion sur la question du centrage horizontal du traitement CSS. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un oeil avec l'éditeur, je vous souhaite à tous un bon jeu

1. Paramètre de centrage horizontal - élément en ligne

Set 1 text-align:center through l'élément parent ; centre le contenu de l'élément parent

2. Paramètre de centrage horizontal - élément de bloc à largeur fixe

La largeur de l'élément de bloc est fixe valeur, en définissant " La valeur "Marge gauche et droite" est "auto" pour obtenir un centrage

Exemple :

<!DOCTYPE HTML>    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<title>定宽块状元素水平居中</title>    
<style>    
p{    
    width: 200px;/*固定的宽度*/
    margin: 20px auto;/*左右margin设置为auto*/
    border: 1px solid red;    
}    
</style>    
</head>    
<body>    
<p>我是定宽块状元素，我要水平居中显示。</p>    
</body>    
</html>

Copier après la connexion

3. Réglage du centrage horizontal - élément de bloc à largeur variable

Méthode 1. Ajouter une balise de table

Exemple :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{   
    margin:0 auto;   
}   
/*下面是任务区代码*/   
.wrap{   
    background:#ccc;   
}   
</style>
</head>
<body>
<table>
  <tbody>
    <tr><td>
        <p class="wrap">
            我要水平居中     
        </p>
    </td></tr>
  </tbody>
</table>

</body>
</html>

Copier après la connexion

Méthode 2. Définir la méthode display:inline, similaire à la première méthode, définissez le afficher le type pour les éléments en ligne, procéder aux paramètres d'attribut pour les éléments à largeur variable

Exemple :

<!DOCTYPE HTML>   
<html>   
<head>   
<meta charset="utf-8">   
<title>不定宽块状元素水平居中</title>   
<style>   
.container{text-align:center;}   
.container ul{list-style:none;margin:0;padding:0;display:inline;}   
.container li{margin-right:8px;display:inline;}   
</style>   
</head>   

<body>   
<p class="container">   
    <ul>   
        <li><a href="#">1</a></li>   
        <li><a href="#">2</a></li>   
        <li><a href="#">3</a></li>   
    </ul>   
</p>   
</body>   
</html>

Copier après la connexion

Méthode 3. Définir la position : relative et gauche : 50 % Utilisez le positionnement relatif pour décaler l'élément de 50 % vers la gauche, c'est-à-dire pour atteindre l'objectif de centrage

Exemple :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
/*下面是代码任务区*/   
.wrap{   
    clear:both;   
    float:left;   
    position:relative;   
    left:50%   
    }   
.wrap-center{   
    background:#ccc;   
    position:relative;   
    left:-50%;   
}   
</style>
</head>

<body>
<!--下面是代码任务区-->
<p class="wrap">
    <p class="wrap-center">我们来学习一下这种方法。</p>
</p>
</body>
</html>

Copier après la connexion

ci-dessus Cette brève discussion sur la question du centrage au niveau du traitement CSS est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le PHP chinois. site web.

Pour plus d'articles sur le centrage du niveau de traitement CSS, veuillez faire attention au site Web PHP chinois !