整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML ul li 橫排居中排列的方法，三步驟及實例
無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：
HTML ul li 橫排居中排列的方法，三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block，個人比較常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內邊距padding-left設置為0，具體可見下方的綜合實例。
垂直居中方法：為包含ul元素的div元素設置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設置），然后將ul的line-height屬性設置為父元素的高度height即可。
將ul元素的list-style屬性設置為none即可。
HTML ul li 橫排居中排列的方法，三步驟及實例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程
如上代碼，一定要將ul的左內邊距padding-left設置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
在網頁中將 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 屬性。以下是一種常用的實現方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Centering</title>
<style>
.center {
width: 300px; /* 設置元素寬度 */
margin: 0 auto; /* 水平居中 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="center">
<p>This element is horizontally centered.</p>
</div>
</body>
</html>
在上面的示例中， center 類的元素使用了 width: 300px; 來設置寬度，然后通過 margin: 0 auto; 來實現水平居中。這樣，無論屏幕寬度如何變化，元素都會始終水平居中顯示。
您也可以將此樣式應用到任何 HTML 元素（例如 div 、 span 、 p 等），以實現水平居中效果。
于html的元素居中其實只有兩類居中，一是塊元素居中，二是內聯元素居中。
內聯元素居中使用text-align，塊元素居中使用margin。
一、內聯元素
內聯元素居中，使用原則就是在其父元素上設置text-margin:center。
例如<span>元素居中
網頁上顯示效果為：
另外<a>標簽也是一樣
網頁上顯示效果為：
二、塊元素
塊元素居中，使用原則就是在需要居中的元素上設置margin:0 auto。
例如<div>元素居中
網頁上顯示效果為：
另外，如果塊元素已經浮動（例如float:left）居中方法
例如已經浮動了的<div>元素
網頁上顯示效果為：
上面代碼意義：
因為已經浮動了的緣故，所以采用margin:0 auto對元素已經不起作用了，所以采用position:relative，然后利用位 置top:50%與left:50%可以將元素居中，但是此時是以元素的左上角為參考點。
實際情況元素向右和向下平移了元素寬度與高度的一半，所以后面還需要加上margin:0 -50px(這個例子高度的一半為50px，以實際情況為準)，如果垂直方向也要居中的話，就將0改為高度一半的相反數。
對前端感興趣的小伙伴記得關注小編，每天都會更新前端的一些小技巧。沒點贊的小伙伴記得點贊收藏哦，謝謝大家！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
