横並びリストを中央に寄せる
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