テキストを左寄せのまま中央寄せにしたいです。

前提

flexboxを活用して、ページレイアウトを整えています。
テキストを左寄せのまま中央に寄せたいです。
可能であれば、paddingで余白を調整するのではなく、flex（もしくは他の手法）で中央寄せを実現したいと考えています。

実現したいこと

以下の画像、imgの右部分にあたるテキストを

このように左揃えのまま中央寄せにしたいです。

該当のソースコード

HTML
1省略
2<body>
3    <div class="container">
4    <div class="mainvisual">
5        <img class="mainvisual-img" src="./assets/img/mainvisual.jpg" alt="mainvisual">
6    </div>
7
8    <header class="header">
9        <div class="logo">
10            <img src="./assets/img/logo.svg" alt="wooden jewelry">
11        </div>
12
13        <nav class="list">
14           <ul>
15            <li>Concept</li>
16            <li>Work</li>
17            <li>Contact</li>
18           </ul>
19        </nav>
20    </header>
21
22    <main class="main">
23        <section class="section">
24          <div class="concept">
25            <img src="./assets/img/concept.jpg" alt="concept-img" class="concept-img">
26          </div>
27
28          <div class="concept-description">
29            <h2 class="concept-title">私たちのかんがえるジュエリーとは<br>
30                <span>concept</span>
31            </h2>
32
33            <p class="text">
34                テキストテキストテキストテキストテキストテキストテキスト<br>
35                テキストテキストテキストテキストテキストテキスト
36            </p>
37          </div>
38        </section>
39    </main>
40
41    </div>
42</body>
43省略

css
1@charset "UTF-8";
2
3html {
4    font-size: 100%;
5}
6
7body {
8    margin: 0%;
9    font-family: 'Crimson Text', serif;
10}
11
12img {
13    max-width: 100%;
14    vertical-align: bottom;
15}
16
17ul {
18    list-style: none;
19}
20/*---------------------*/
21.mainvisual {
22    text-align: center;
23    
24}
25.mainvisual-img {
26    width: 90vw;
27    max-width: 100%;
28    margin-top: 5%;
29}
30
31.header {
32    width: 90vw;
33    margin: 0 auto;
34    display: flex;
35    align-items: center;
36    
37}
38
39.logo img {
40    width: 150px;
41}
42
43.header ul {
44    display: flex;
45}
46
47.header li {
48    padding-left: 50px;
49    font-size: 0.8rem;
50    
51}
52
53/*-------------------*/
54.main {
55    width: 1000px;
56    margin: 0 auto;
57}
58
59.section {
60    display: flex;
61    align-items: center;
62    margin-top: 50px;
63}
64
65.concept {
66    width: 50%;
67}
68
69.concept-img {
70    width: 100%;
71}
72
73.concept-description {
74    width: 50%;
75}
76
77.concept-title {
78　line-height: 0.8;
79}
80
81.concept-title span {
82    font-size: 1rem;    
83}
84
85.text {
86   font-size: 1rem;  
87}
88

試したこと

・.section {
display: flex;
align-items: center;
margin-top: 50px;
justify-content: center; /追加/
}

では変化がありませんでした。

・section {
display: flex;
align-items: center;
margin-top: 50px;
text-align: center; /追加/
}

.concept-title {
line-height: 0.8;
display: inline-block;/追加/
text-align: left;/追加/
}

.text {
font-size: 1rem;
display: inline-block;/追加/
text-align: left;/追加/

タイトルとテキストがズレて左寄せになってしまいました。

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

ここにより詳細な情報を記載してください。

yambejp

2022/12/23 03:57

見た感じ普通に左寄せの中央寄せになっているようですが、ずれていることが確認できるようにどこかのサイトにアップすることは可能ですか？またお試しされているずれるブラウザはなんでしょうか？

hatena19

2022/12/23 06:36

.concept-description の部分の幅をどのようにする想定でしょうか。 .concept-title のテキスト幅に合わせるということでしょうか。

wkou4627

2022/12/26 01:59

yambejp さんコメントありがとうございます。 https://fancy-pixie-8af69f.netlify.app/ こちらで確認することはできますでしょうか？ブラウザは、Google Chromeを使用しています。

wkou4627

2022/12/26 02:05

hatena19さんコメントありがとうございます。 .concept-descriptionの幅は、.section(1000pxにしています）の50％に指定しています。 .concept-title と .text を、その中心に表示させたいと考えています。

yambejp

2022/12/26 02:07

Windowsのchrome/firefox/edgeで参考サイトを開きましたが想定のとおりになっていると思いますが・・・

wkou4627

2022/12/26 02:19

yambejpさんご確認ありがとうございます。 yambejpさんには、タイトルとテキストが、質問の「実現したいこと」欄にある１枚目の状態ではなく２枚目の表示で見れているということですか？自分のブラウザではそのように表示されておらず。。。おかげで、コードの間違いではなさそうなことがわかりました。原因を調べてみようと思います。ありがとうございます。

yambejp

2022/12/26 02:32

失礼しました。１枚目ではなく２枚目が想定なのですね。テキストが左寄せで余白調整なのですから命題では否定していますがやはりpaddingが妥当でしょうね .concept-description{ padding-left:30px; }

wkou4627

2022/12/26 02:47

このような場合は、paddingを使うものなのですね！自分は、どのプロパティを使うのが最適なのかがはっきりしないレベルにいるので、そのように言ってもらえてとてもスッキリしました。日が空いてしまったにもかかわらず、対応していただき本当にありがとうございました！

wkou4627

2022/12/26 02:58

「やってほしいことだけを記載した丸投げの質問」という指摘を下さった方ご指摘ありがとうございます。自分としては、質問前の確認事項に気をつけながら、「試したこと」の欄にやってみたこととその結果を記載し、他の方法を皆さんにご意見いただけたらという気持ちで質問をしていました。プログラミングもこちらのサイトも始めたばかりで、考えが及ばず申し訳ないのですが、どういった部分が不十分であるかを具体的に教えていただけると嬉しいです。今後、その点にも注意して利用させていただきたいです。

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

回答1件

ベストアンサー

質問には明確に説明されていませんが、想定している画像をみると、タイトル(.concept-title)とテキスト部分(.text)の幅が同じになっています。

そこから推定すると、ご希望のことは、

.concept-titleは.concept-description内(50%幅)で中央配置、
.textは.concept-titleの幅と同じにして中央配置、内部のテキストは左寄せ

ということでしょうか。

だとすると、.textの幅を.concept-titleの幅と同じにするのはJavaScriptを使うことになりそうです。

css
1.concept-description {
2  width: 50%;
3  display: flex; /* 追加 */
4  flex-direction: column; /* 追加 */
5  align-items: center; /* 追加 */
6}

JavaScript
1const title = document.querySelector(".concept-title");
2const text = document.querySelector(".text");
3text.style.width = title.clientWidth + "px";

CodePenサンプル

投稿2022/12/26 04:07

hatena19

総合スコア34345

wkou4627

2022/12/26 14:51

まさにこのようにしたかったです！JavaScriptを使うと実現できるのですね！ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

テキストを左寄せのまま中央寄せにしたいです。

前提

実現したいこと

該当のソースコード

試したこと

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

関連した質問