[筆記] CSS ul li 水平置中方法 @地瓜大的飛翔旅程

章節連結

程式碼示範

方法一：浮動兩次再調整相對位置

方法二：text-align + inline-block

方法三：display:table + margin

若在前端網頁設計中，使用了 <li> 來製作水平選單時，有機會遇到無法水平置中的問題。這邊收集了兩種方法來解決。
(P.S. 若是要水平左右端，運用 float:left; float: right; 即可)

程式碼示範

方法一：浮動兩次再調整相對位置

<div id=”nav”>
  <ul>
    <li>ABC</li>
    <li>DEF</li>
  </ul>
</div>

#nav{
  float: right;
  left: -50%;
  position: relative;
}

#ul{
float:left;
left: 50%;
position: relative;
}

<ul>

</ul>

</div>

#nav{

float: right;

left: -50%;

position: relative;

}

#ul{

float:left;

left: 50%;

position: relative;

}

方法二：text-align + inline-block

<div id=”nav”>
  <ul>
    <li>ABC</li>
    <li>DEF</li>
  </ul>
</div>

.nav {
    text-align: center;
}

.nav ul {
    display: inline-block;
}

<ul>

</ul>

</div>

.nav {

text-align: center;

}

.nav ul {

display: inline-block;

}

方法三：display:table + margin

<ul>
    <li>ABC</li>
    <li>DEF</li>
</ul>

ul li {
  display: table;
  margin: 0 auto;
}

<ul>

</ul>

ul li {

display: table;

margin: 0 auto;

}

按讚加入粉絲團

章節連結

程式碼示範

方法一：浮動兩次再調整相對位置

方法二：text-align + inline-block

方法三：display:table + margin

延伸閱讀