cssでトリミングした画像を真ん中に配置する方法について

######分からないこと
CSSでトリミングした画像を親要素の中央に配置したいのですが上手くいきません。
中央に配置する方法を教えてください。

#####試したこと
CSSのimgタグで以下のコードを入力しました。
text-align:center;

display:flex;
justify-content:center;

html
1<div class="main-right-wrapper">
2                <img src="images/ranking1.jpg" alt="プロフィール画像">
3                <h2>name name</h2>
4                <p>テキストテキストテキストテキストテキストテキスト</p>
5            </div>

css
1
2.main-right-wrapper{
3    width:35%;
4    float:right;
5}
6
7.main-right-wrapper img{
8    width:100px;
9    height:100px;
10    border-radius: 50%;
11    margin-top:100px;
12}

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

回答1件

ベストアンサー

text-alignは内包するインラインコンテンツの位置決めですので、親要素に設定する必要があります。

css
1.main-right-wrapper{
2    width: 35%;
3    float: right;
4    text-align: center;
5}

子孫要素に継承しますので、h2 や p のテキストも中央寄せになりますので、もし、テキストは左寄せにしておきたいのなら、それぞれにtext-alignを設定する必要があります。

css
1.main-right-wrapper h2,
2.main-right-wrapper p{
3    text-align: left;
4}

display:flex; を使う場合も親要素に設定します。

css
1.main-right-wrapper{
2    width:35%;
3    float:right;
4    display: flex;
5    flex-direction: column;    
6    align-items: flex-start;
7}
8
9.main-right-wrapper img{
10    width:100px;
11    height:100px;
12    border-radius: 50%;
13    margin-top:100px;
14    align-self: center;
15}