<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/>
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>
今日は答えを見つけました。遅すぎるかもしれませんが、それでもはるかに優れていると思います。これを確認してください https://jsfiddle.net/Amar_newDev/khb2oyru/5/
CSSコードを変更してみてください:<ul> max-width:1%; margin:auto; text-align:left; </ul>
max-width:80%またはそのようなもの。
何か新しいものを見つけるかもしれないと実験してみてください。