ul li（リスト）を中央に表示したい。

Question

わかりやすく色付けをしているのですが、赤色で塗りつぶしている部分を、黒塗りの中で中央に動かしたいのですが、右側に寄ったままで、うまくいきません。

御指南頂けますと幸甚です。

 <div id = "misaki-lesson">
<ul>
  <li>
    <a class="misaki-link" href="/lessons/3">
    <div class = "class-title">『奇跡の大変身！もっと美しく若返るトータル美容レッスン』</div>
    日時：8月28日 00:00 ~ 12月6日 17:14</br>
    <div id = "tuning">場所：名鉄カルチャースクール</id>
</a>  </li>
  <li>
    <a class="misaki-link" href="/lessons/2">
    <div class = "class-title">『スマイルラインで話すボイスレッスン』</div>
    日時：8月27日 00:00 ~ 12月5日 16:14</br>
    <div id = "tuning">場所：名鉄カルチャースクール</div>
</a>  </li>
</ul>
</div>

#misaki-lesson {
  background-color: #000000;
  margin-top: 0.5rem;
}
#misaki-lesson li {
  background-color: #FF0000;
  margin-bottom: 1rem;
  padding: auto;
  display: block;
}
#misaki-lesson ul li {
  border-bottom: 2px solid #eee;
}
#misaki-lesson ul li:last-child {
  border-bottom: 0 none;
}
#misaki-lesson #tuning {
  padding-bottom: 1rem;
}

Comments

[退会済みユーザー]

画面の中央ということでしょうか？

[kei344]

CSSではなくSCSSなどではありませんか？出力されたCSSを提示いただいたほうが回答しやすいと思います。

[innjera]

>Furisukeさん：画面の水平中央という意味です。より分かりやすい写真に変更しました。

[innjera]

>kei344さん : 失礼致しました。SCSSの状態でしたので、CSSに変更しました。

Answer 1

いくつか指摘を。
0. 既に指摘されているように </id> は </div>
0. padding に auto は無い
0. </br> は <br />

で、ul要素はデフォルトスタイルで padding-left が付いています。左側の「黒」はその影響です。

#misaki-lesson ul {
    padding: 0 1em; /* 数値は適当 */
}
```**動くサンプル：**[https://jsfiddle.net/hgdby50g/](https://jsfiddle.net/hgdby50g/)

---


【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)

Comments

[innjera]

CSSの基本的な誤り含めご指摘有難う御座いました。全て解決したと同時に、CSSの理解も深まりました。有難う御座いました！！

Answer 2

反映させたいliのCSSにmarginとwidthを追加すればいいかと

/*例*/
margin: 0 auto;
width:80%;

あとコピペミスですかね？<div>の閉じタグが</id>になってますよ。

Comments

[innjera]

タグのご指摘有難う御座います。（修正しました）
また、コメント有難う御座います。教えて頂いた通りにやって見ましたが、確かに右側にスペースはできたのですが、左側の黒塗り空きスペースと右側の黒塗り空きスペースが均一になりませんでした。。