文字を左揃えにしたまま中央に寄せたいです。

前提・実現したいこと

タイトルの通り、左揃えのまま中央にテキストを寄せたくて
元のdivにtext-align:center;をかけ、子要素にdisplay:inline-block;；とtext-align:left;をかけたのですが左揃えになりません。
コードは、

.ad-p{
text-align: center;
}
.SNS-list{
display: inline-block;
text-align: left;
font-size: 12px;
font-family: "A-OTF Gothic BBB Pr6N";
line-height: 110px;

}

テキストは複数です。複数を左揃えで中央に並べたいです。
詳しい方よろしくお願いいたします。

kei344

2019/09/02 18:01

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答2件

HTML
1<div class="ad-p">
2<p class="SNS-list">
3text text text<br>
4text text text text text<br>
5text text<br>
6text text text text text text text text text<br>
7text text text<br>
8text text text
9</p>
10</div> 
11```**動くサンプル：**[https://jsfiddle.net/s0p3eqaw/](https://jsfiddle.net/s0p3eqaw/)

投稿2019/09/02 18:03

kei344

総合スコア69407

左揃えになりません。

なっています。
各の幅が「最小幅」になっているので、「左寄せ・右寄せ・中央揃い」が同じ位置になっているだけです。

大きな幅を付与してみると分かるかと思います。

例）

CSS
1.SNS-list {
2  display: inline-block;
3  text-align: left;
4  font-size: 12px;
5  font-family: "A-OTF Gothic BBB Pr6N";
6  line-height: 110px;
7  width: 300px; /* ← 追加：任意の幅 */
8  background-color: silver; /* ← 追加：範囲を分かりやすくしています */
9}