Home > Article > Web Front-end > A brief discussion on horizontal centering of CSS processing

A brief discussion on horizontal centering of CSS processing

高洛峰Original: 2017-03-02 15:44:051387browse

The following editor will bring you a brief discussion on the issue of horizontal centering of CSS processing. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Come and have a look with the editor, I wish you all a happy game

1. Horizontal centering setting-inline elements

Set 1 text-align:center through the parent element ; , center the content of the parent element

2. Horizontal centering setting-fixed-width block element

The width width of the block element is a fixed value, by setting " The left and right margin" value is "auto" to achieve centering

Example:

<!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>

3. Horizontal centering setting - variable width block element

Method 1. Add table tag

Example:

<!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>

Method 2. Set display:inline; method, similar to the first method, set the display type to inline elements, and perform variable width elements Attribute setting

Example:

<!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>

Method 3. Set position:relative and left:50% to use relative positioning method, offset the element by 50% to the left, that is, to achieve the purpose of centering

Example:

<!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>

The above article briefly talks about CSS processing horizontal centering The question is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles on the centering of CSS processing levels, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of turning an image into gray mode using CSS3Next article：Example of turning an image into gray mode using CSS3

See more

A brief discussion on horizontal centering of CSS processing

Related articles