HTMLでulの縦並びのまま中央揃えする方法

点と文字の間は一定(開けすぎない)で、点が縦一列になったまま中央に配置させ、左右に等間隔で背景色をいれたいです。
イメージとしては
・いちご
・ぶどう
・なし
のようなかんじのまま、画面中央に配置して、左右に文字より多め量の色を入れる感じです
とりあえず、考えて書いてみたんですが、点と文字の間がたくさん空間ができ、点が中央付近にいてくれません。
どうすればいいですか？

HTML
1<ul>
2<li>いちご</li>
3<li>ぶどう</li>
4<li>なし</li>

CSS
1ul{background-color: lightpink;
2   text-align:center;
3   margin-left:20%;
4    margin-right: 20%;}

m.ts10806

2021/02/25 22:17 編集

図示してもらえますか？ペイントとか何かで完成イメージとして絵で。

行動規範の内容に同意します

回答4件

グリッドレイアウトがよさそうです。

サンプル

css
1ul {
2  background-color: lightpink;
3	/* text-align: center; */
4	/* margin-left: 20%; */
5	/* margin-right: 20%; */
6  display: grid;
7  grid-template-columns: auto;
8  justify-content: center;
9  list-style-position: inside;
10  padding: 0;
11}
12li{
13  background-color: red;
14}

投稿2021/02/26 01:32

編集2021/02/26 01:42

Lhankor_Mhy

総合スコア36941

行揃えで

<html>
    <head>
        <style>
        .container {
            text-align: center;
        }
        ul {
            display: inline-block;
            background-color: lightpink;
            text-align: left;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <ul>
                <li>いちご</li>
                <li>ぶどう</li>
                <li>なし</li>
            </ul>
        </div>
    </body>
</html>

Flexbox で

<html>
    <head>
        <style>
        .container {
            display: flex;
        }
        .container div {
            flex-grow: 1;
            background-color: aqua;
        }
        .container ul {
            flex-shrink: 0;
            display: inline-block;
            background-color: lightpink;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div></div>
            <ul>
                <li>いちご</li>
                <li>ぶどう</li>
                <li>なし</li>
            </ul>
            <div></div>
        </div>
    </body>
</html>

投稿2021/02/26 00:49

takna

総合スコア784

こういうことでしょうか？

サンプル

CSS
1ul{
2    background-color: lightpink;
3    list-style: none;
4    margin: 0 20%;    
5}
6li {
7    width: 100px;
8    margin: 0 auto;
9}
10li:before {
11    content:  "・";
12}

//追記 taknaさんのFlexboxのやつが一番スッキリしますね。

投稿2021/02/26 00:51

編集2021/02/26 00:54

mai1210

総合スコア272

ベストアンサー

ul を囲むブロックを作成して、

html
1<div class="wrapper">
2  <ul>
3    <li>いちご</li>
4    <li>ぶどう</li>
5    <li>なし</li>
6  </ul>
7</div>

それに背景色を設定、ul は inline-block にして text-align: center; で中央寄せ。

css
1.wrapper {
2  background-color: lightpink; 
3  text-align: center;
4}
5ul {
6  display: inline-block;
7  text-align: left;
8  list-style-position: inside;
9  padding: 0;
10}

あるいは、flexで中央寄せ。

css
1.wrapper {
2  background-color: lightpink; 
3  display: flex;
4  justify-content: center;
5}
6ul {
7  list-style-position: inside;
8  padding: 0;
9}