찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >CSS가 수평 센터링 문제를 처리합니다.

CSS가 수평 센터링 문제를 처리합니다.

WBOY
WBOY원래의
2016-09-05 08:45:351312검색

1. 가로 중심 설정 - 인라인 요소

상위 요소를 통해 1 text-align:center;을 설정하여 상위 요소의 콘텐츠를 중앙에 배치합니다.

2. 가로 중심 설정-고정폭 블록 요소

블록 요소의 너비는 고정된 값이며, "왼쪽 및 오른쪽 여백" 값을 "auto"로 설정하면 중앙에 위치한

을 구현할 수 있습니다.

예: 

<!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. 가로 중심 설정 - 가변 폭 블록 요소

방법 1. table 태그

추가

예: 

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

방법 2. 첫 번째 방법과 유사하게 display:inline; 방법을 설정하고, 표시 유형을 인라인 요소로 설정하고, 가변 너비 요소의 속성을 설정합니다

예: 

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

방법 3. position:relative 및 left:50%를 설정하여 상대 위치 지정을 사용하여 요소를 왼쪽으로 50% 오프셋하여 중앙 정렬 목적을 달성합니다.

예: 

<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: 수정 환영

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3_02다음 기사：CSS3_02

관련 기사

더보기