search

Home >Web Front-end >HTML Tutorial >CSS handles horizontal centering issues

CSS handles horizontal centering issues

WBOY
WBOYOriginal
2016-09-05 08:45:351314browse

1. Horizontal centering setting-inline elements

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

2. Horizontal centering setting-fixed width block element

The width of the block element is a fixed value. Centering can be achieved by setting the "left and right margin" value to "auto"

Example: 

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

3. Horizontal centering setting - block elements with variable width

Method 1. Add table tag

Example: 

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">33dbd6eca5d5549327dcaa8ed8d3107b</span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;">0d3cc7583801e8d6e6907d4c7e87bf60</span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>不定宽块状元素水平居中<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;">table</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;">    margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0 auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">下面是任务区代码</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #800000;">.wrap</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">12</span> <span style="background-color: #f5f5f5; color: #ff0000;">    background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #008080;">16</span> <span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;">f23d86026244fffc3c9e7a86fab75cd5</span>
<span style="color: #008080;">18</span>   <span style="color: #0000ff;">fe290220f0dc5353c49a0552c2b18cd9</span>
<span style="color: #008080;">19</span>     <span style="color: #0000ff;">606b64bbc6f0c0260ee25260bf3e75fd88203afe6bd4dfdb2b1b0799cf0e13eb</span>
<span style="color: #008080;">20</span>         <span style="color: #0000ff;">75529d1c38a265491928220a31bf685c</span>
<span style="color: #008080;">21</span> <span style="color: #000000;">            我要水平居中  
</span><span style="color: #008080;">22</span>         <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #008080;">23</span>     <span style="color: #0000ff;">56cf461caffbd7919dfc7cf6ceac9c3f1908b3b1aec0ac546b8f40171196b4f6</span>
<span style="color: #008080;">24</span>   <span style="color: #0000ff;">867cecdbca0fe0657de8e051234c2db6</span>
<span style="color: #008080;">25</span> <span style="color: #0000ff;">dc6fb698d5f346cc2f166c6140d50c2e</span>
<span style="color: #008080;">26</span> 
<span style="color: #008080;">27</span> <span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #008080;">28</span> <span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>

Method 2. Set the display:inline; method, which is similar to the first method. Set the display type to inline elements and set the attributes of variable-width elements.

Example: 

<span style="color: #0000ff;">33dbd6eca5d5549327dcaa8ed8d3107b</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #0000ff;">0d3cc7583801e8d6e6907d4c7e87bf60</span>
<span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>不定宽块状元素水平居中<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span><span style="background-color: #f5f5f5; color: #800000;">
.container</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.container ul</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">list-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">inline</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.container li</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">8px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">inline</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>

<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #0000ff;">b04f026226cff5a2aa6e2a4016f5fa27</span>
    <span style="color: #0000ff;">a15f8999304d48fee6cdba3fb75b0af0</span>
        <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fccc7ab37c32f8c364fe53a2ba4d5afddb5</span>1<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e9a0dcfbb8f74d23e1e5829d29873faa4</span>
        <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fccc7ab37c32f8c364fe53a2ba4d5afddb5</span>2<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e9a0dcfbb8f74d23e1e5829d29873faa4</span>
        <span style="color: #0000ff;">9d549b8f9ec5571cba0d7211f45a4fccc7ab37c32f8c364fe53a2ba4d5afddb5</span>3<span style="color: #0000ff;">ef2198faed6b9ce9f38821054836d50e9a0dcfbb8f74d23e1e5829d29873faa4</span>
    <span style="color: #0000ff;">76472038331ba440f7972f1d519f8dbe</span>
<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>

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

Example: 

<span style="color: #0000ff;">33dbd6eca5d5549327dcaa8ed8d3107b</span>
<span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #0000ff;">0d3cc7583801e8d6e6907d4c7e87bf60</span>
<span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>不定宽块状元素水平居中<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span>
<span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">下面是代码任务区</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #800000;">
.wrap</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    clear</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">both</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50%
    </span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.wrap-center</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>

<span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #008000;">566e7c080f5240cc8118de822b1c3db8</span>
<span style="color: #0000ff;">75529d1c38a265491928220a31bf685c</span>
    <span style="color: #0000ff;">a051ed93a7b3c43e5622e1e29dfbba8f</span>我们来学习一下这种方法。<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>

ps: Corrections welcome

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：CSS3_02Next article：CSS3_02

Related articles

See more