HTML/CSS 星評価の中央揃えを行いたい。

Question

前提・実現したいこと

現在、初心者としてフロントエンドを独学中となります。
まずHTML/CSSのみで1からポートフォリオの作成を行っております。

イメージ画像と文字と星評価（★★★☆☆）を中央揃えの実施を行っています。

発生している問題・エラーメッセージ

星評価（★★★☆☆）を中央揃えが行えません。
画像（黄緑色塗りつぶし部分）

該当のソースコード

      <section>
            <div id="skil">
              <h1>スキル</h1>
              <ol>
                <li>
                  <div class="logo">
                    <img src="src/ExcelVBA.png" alt="ExcelVBAロゴ">
                    <p>VBA</p>
                    <div class="star">
                      <div class="star-item star2"></div>
                    </div>
                  </div>
                </li>
              </ol>
            </div>
      </section>


、、、CSS
.star {
  position: relative;
  display:inline-block;
  background-color: greenyellow;
  text-align: center;
  justify-content:center;
}
.star .star-item{
  position:absolute;
  overflow: hidden;
  justify-content:center;
  text-align: center;
}
.star .star-item:before{
  content:"★★★★★";
  color: #ffcc33;
  justify-content:center;
  text-align: center;
}
.star:after {
  content:"★★★★★";
  color: #ccc;
  justify-content:center;
  text-align: center;
}

.star2 {
  width:40%;
  text-align: center;
  justify-content:center;
}


### 試したこと

  justify-content:center;
  text-align: center;　
　などで★評価部分のみの中央揃えを試しましたが、上手くいきませんでした。

### 補足情報（FW/ツールのバージョンなど）

ブラウザはChrome使用
テキストエディターはVScodeを使用

ぜひ、ご回答のほどお願いいたします。

Comments

[yambejp]

HTMLが中途半端、せめてliの親要素くらいは書いたほうがよいでしょう

Answer 1

親要素に、display: flex; を設定して、そこで子要素の配置を設定します。

そうすると子要素(imgタグ pタグ .star)がその指定で配置されます。

.logo {
  display: flex;
  flex-direction: column; /*縦方向*/
  align-items: center;    /*中央揃え*/
}

.star {
position: relative;
background-color: greenyellow;
}
.star .star-item{
position:absolute;
overflow: hidden;
}
.star .star-item:before{
content:"★★★★★";
color: #ffcc33;
}
.star:after {
content:"★★★★★";
color: #ccc;
}

.star1 {
width:20%;
}

Flexbox の基本的な使い方/Web Design Leaves

Comments

[yu_003]

ご回答ありがとうございます。
下記を実施してみたのですが、反映されませんでした。

.logo {
width: 150px;
display: flex;
flex-direction: column; /*縦方向*/
align-items: center; /*中央揃え*/
}

[yu_003]

申し訳ありません！
再度試してみたらできました！
ご回答ありがとうございます！

[hatena19]

text-align: center; は子孫要素に継承されますので、li に設定すると子や孫にも適用されます。
テキストやインライン要素(inline-blockも含む)が中央寄せになります。
今回は star が inline-block なので中央寄せになりました。

display: flex;
flex-direction: column; /*縦方向*/
align-items: center; /*中央揃え*/

は、ブロック要素でも中央に配置されます。
ただし、子要素にしか聞きませんので、logoクラスの要素に設定する必要があります。

new1roさんのコメントにあるように中央寄せの方法は、中央寄せする対象によっていろいろな方法がありますので、いろいろなパターンを覚えておくといいでしょう。

[yu_003]

flexboxは子要素のみなんですね。

new1roさんの補足までして頂き、大変勉強になります。
今回は様々な方法でもできるということが知れました。
ありがとうございます。

Answer 2

こちらでいかがでしょうか?

li {
  text-align: center; /* 追加 */
}

.star {
  position: relative;
  display: inline-block;
  background-color: greenyellow;
  /*
  text-align: center;
  justify-content: center;
  */
}
.star .star-item {
  position: absolute;
  overflow: hidden;
  /*
  justify-content: center;
  text-align: center;
  */
}
.star .star-item:before {
  content: "★★★★★";
  color: #ffcc33;
  /*
  justify-content: center;
  text-align: center;
  */
}
.star:after {
  content: "★★★★★";
  color: #ccc;
  /*
  justify-content: center;
  text-align: center;
  */
}

.star1 {
  width: 20%;
  /*
  text-align: center;
  justify-content: center;
  */
}

Comments

[yu_003]

できました！ありがとうございます！

liタグで中央揃えができるのですね。
pタグなどにも反映されておりました。

なんとなく理解できました。
差し支えなければ少しご説明願えないでしょうか。

[new1ro]

liタグなのかpタグなのか、というのはあまり関係ありません。

display: inline-block;やdisplay: inline;要素を中央揃えにしたいときは、その親要素に
text-align: center;を指定する必要があります。

----------
左右中央揃え、左右中央配置についてのパターンはおおよそ以下の3つ、と覚えればOKです。

[1] 文字の左右中央揃え
親要素に以下のソース指定すると、子要素の「display: inline;」や「display: inline-block;」だけが、左右中央揃えになります。display: block;の子要素を左右中央揃え (左右中央配置) にすることはできません。
```
text-align: center;
```

[2] いわゆるブロック要素 (display: block;) の要素を中央配置
display: block;が指定された要素を左右中央配置するときは、その要素自体に以下を指定します。
(親要素は関係ありません)
```
margin: 0 auto;
width: 100px; /* pxか%などで指定 */
```

[3] display: flex;での左右中央配置
子要素が左右中央配置となります。(文章は中央揃えにはなりません。)
```
display: flex;
justify-content: center; /* display: flex;とセットで書かないと意味がない */
```

[yu_003]

ご丁寧にご説明頂きありがとうございます！

中央揃えに関しては大変悩んでいたため、
今回ご説明頂いた内容で理解が深まりました！

ブロック要素
インラインブロック要素
インライン要素
など様々なパターンでのご説明誠にありがとうございます！！！