web-dev-qa-db-ja.com

<ul>の箇条書きをテキストの中央に配置するにはどうすればよいですか？

<ul>を中央に配置しようとすると、<li>のテキストは中央に配置されますが、箇条書きはページの左端に残ります。箇条書きのポイントをテキストの中央に配置したままにする方法はありますか？

#abc{text-align: center; }

<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>
htmlcsshtml-lists
27
a person

list-style-position: inside をul要素に追加します。 （例）

list-style-positionプロパティ のデフォルト値はoutsideです。

ul {
    text-align: center;
    list-style-position: inside;
}
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

別のオプション（結果が少し異なる）は、ul要素全体を中央に配置することです。

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}
<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>
38
Josh Crozier

ul要素のlist-style-position: inside;でそれを行うことができます：

ul {
    list-style-position: inside;
}

作業フィドルを参照

21
Michael P. Bazos

今日は答えを見つけました。遅すぎるかもしれませんが、それでもはるかに優れていると思います。これを確認してください https://jsfiddle.net/Amar_newDev/khb2oyru/5/

CSSコードを変更してみてください：<ul> max-width:1%; margin:auto; text-align:left; </ul>

max-width：80％またはそのようなもの。

何か新しいものを見つけるかもしれないと実験してみてください。

1
Amar Parajuli