ブロック要素の中央寄せ＋子要素のブロック要素の左寄せ

Question

利用フレームワーク Skelton

文章全体（others）を中央寄せにし、
文章（others-inquiry, others-bug, others-policyの中身 h4,divら）の頭を左揃えにしたいです。

<div class="section others">
  <div class="container">
    <div class="others-inquiry">
      <h4>お問い合わせ</h4>
      <div>お問い合わせは下記までお願いします。</div>
      <div>[e-mail]</div>
      <div>00000-0000-0000</div>
      <div>対応時間：平日 10:00-17:00</div>
    </div>
    <div class="others-bug">
      <h4>不具合について</h4>
      <div>本サービスはβ版です。</div>
      <div>テスト運用中ですので不具合がございましたらお問い合わせよりご連絡ください。</div>
      <div>精査の上アップデートを行います。</div>
      <div>ご意見・ご要望もお問い合わせよりご連絡下さい。</div>
      <div>みなさまからのご意見を本サービスに取り入れさせていただきます。</div>
    </div>
    <div class="others-policy">
      <h4>利用規約・免責事項</h4>
      <div><a href="policy.html" class="policy-link">こちらから御覧ください</a></div>
    </div>
    <div class="others-corporate">
      <h4>運営会社</h4>
      <div>株式会社◯◯が運営しています。</div>
    </div>
  </div>
</div>

body {
text-align:center 
}
....

.section {
	position: relative;
}
.others {
	padding:70px 0px;
}
...

others自体は body {text-align:center;}で中央寄せになっています。

文章一つ一つを左寄せにして揃えたいのですが、これがなかなかできません。

divで囲んでmargin-right:autoにしたり、
ブロック要素ーインライン要素を切り替えてみたりしたのですが、
文章全体が（others）が左に寄ってしまったりとうまく行きません。
かなり初歩的な部分ですが、ご教授いただけると幸いです。

補足
div othersを中央寄せに、
othersの中の項目を左揃えに下記のようにしたい

others {text-align:left}
だと下記のようになる。

Comments

[gin]

補足画像を見ると、h4(？)は中央のままということですか？

[masaakitsuyoshi]

h4は中央です。
section othersを中央に、その中身を左揃えにする方法がわかれば自分でアレンジできるのであえて記載していませんでした。
わかりにくくすみません。

Answer 1

あーこれ、案外難しいんですよね。

.others {
  width: ●●●px; /*何らかの幅を与える。%単位でもOK*/
  margin: 0 auto; /*.ohtersボックス自体を中央配置*/
  text-align: left; /*.ohterボックスの中身のテキストを左寄せ*/
}

基本的には上記のように書くのが定石です。
ただ、とにかくボックスにpxでも%でもいいので幅を指定しないと.ohters自体を中央に配置できないので、
コンテンツ内容によっては左寄せしたテキストが幅を指定したボックスの右端で折り返してしまう可能性が残ります。

コンテンツの中身に応じて.ohters自体の幅を自動伸縮するような状態にしたい場合、
.otherをdisplay:inline-blockとする必要があります。
ただ、そうすると.ohters自体がインラインの動きをするため、.ohtersが連続で出現した場合に改行されずに隣に並んでしまうことになります。

そこで、以下の様にしておく必要があるかと思われます。

<div class="others-wrap">
<div class="others">
コンテンツ
</div>
</div>

.others-wrap {
  text-align:center; /*ブロック要素で囲みつつ、中のコンテンツを中央寄せ=.ohterを中央寄せ*/
}
.others {
  display:inline-block; /*幅が自動調整されるインラインブロックに変更*/
  text-align:left; /*中のコンテンツを左寄せ*/
}

.others-wrap にtext-align:centerを入れてありますが、
既にbodyにtext-align:centerが設定されているのでそちらを有効にするならこれは無くても良いです。

お試しください。

Comments

[masaakitsuyoshi]

難しいですね。。。
試してみます。

[aKusano]

や、幅固定だったり右端で折り返しが発生しても問題ないなら全然普通ですよｗ
折り返さず、幅を自動認識させた上で中央に配置しようとすると
ちょっと頭をつかう必要があるだけですｗ

[masaakitsuyoshi]

なるほど！細かい部分まで理解できてませんが、今回は折り返しが発生してもOKなので、大丈夫でした！

Answer 2

.others {
     margin: 0 auto;
}

これで .others で中央配置し、
それ以外のテキストを左揃えにしたところ text-align: left; すれば実現できるのではないでしょうか。

---

補足を見て、以下追記します。

省略してしまいましたが、この場合、 .others に width を指定することが必要です。

.others {
     width: 980px; // こんな感じでwidth指定してあげると、
     margin: 0 auto; // 左右のマージンを調整しているautoがwidth(幅)を基に左右平等にマージンをとってくれます。
}

また、補足では、 .otｈers 内のタイトルらしきものが中央揃えになっていますが、これは個別で中央揃えを指定してあげればいいと思います。
例えば、

.title {
     text-align: center;
}

Comments

[5o5o_wagon]

かぶりましたね; すみません。。

[masaakitsuyoshi]

body {text-align:left}をとっぱらて、
.others {
margin: 0 auto;
}
のみにすると中央寄せにならないようです。

気づいたのですが、section othersの部分が画面いっぱいに表示されてるのでそれが関係しているかもしれません。

[5o5o_wagon]

.othersにwidthを指定すれば.margin: 0 auto;は効くはずです。

[masaakitsuyoshi]

.othersにwidth指定するんですね。
指定していなかったです。

Answer 3

.others {
    text-align: left;
}

こういうことですか？

.othersの横幅が固定ならば、body {text-align:center;}しなくても

.others {
    margin: 0 auto;
}

とすれば中央に行くと思います。（隠された部分のCSSがどうなっているかにもよりますが）

Comments

[masaakitsuyoshi]

.others {
margin: 0 auto;
}
のみだと中央によらないようです。

自分で書いたCSSには問題無いように思います。
フレームワークに定義されてるかもしれません。

[kei344]

.others に適当な幅を与えないと、中央には寄らないと思いますが、指定されていますか？

[masaakitsuyoshi]

.othersに幅指定してなかったです！
試します！

[masaakitsuyoshi]

下記で出来ました！幅指定していなかっただけだったのですね。
.others {
padding:70px 0px;
width:50%;
margin: 0 auto;
}
※メディアクエリでブレイクポイントごとに若干幅を変える。

Answer 4

とりあえずbodyにtext-align:centerがついているのは何かの理由があると思うのでそのままにして、これでどうでしょう？

.others {
    padding:0 70px;
}
.container div div {
    text-align: left;
}

横にpaddingをつけたいのかなという感じに見えたので、padding:70px 0;→padding:0 70px;にしてみました。
上下のままでいい場合は、元のままでOKです。

Comments

[masaakitsuyoshi]

body {text-align:center;}は特に意味は無いです。
others意外のsectionも中央寄せにするためでした。

padding:70px 0;で上下にpadding持たせたかったです。
左右には特にいらなかったです。

.others {
padding:0 70px;
}
.container div div {
text-align: left;
}
すると、

h4だけ中央寄せで
他のものは下画像の位置になりました。

.container div divなんて書き方あるんですね！