横並びリストを中央に寄せる
ul { text-align: center; li { display: inline; } }
————-
ul.ct{ left: 50%; margin: 0; position: relative; } ul.ct li { float: left; font-weight: bold; margin-right: 5px; left: -50%; line-height: 1.5; position: relative; }
■sass記述用
/* 中央寄せリスト ul class="ct" */ ul { &.ct{ float:left; left: 50%; margin: 0; position: relative; li { float: left; left: -50%; position: relative; } } }
参考サイト
- Webworker's Clip
- [CSS] display: inlineで横並びにした要素の”隙間”を埋める方法
- http://webworkersclip.com/268/
-
前の記事
中央が浮き上がったようなシャドウを追加する 2016.10.24
-
次の記事
position:fixedした要素がスクロール中だけz-indexを無視される 2016.10.24