Skeletonでcontainerを上下中央に表示するには？

Question

Skeletonを利用していて、要素を上下中央に配置したいのですが、うまくいきません。

現在、下記containerが、sectionの中央に配置されていません。
左右に対しては中央になっていますが、上下にも中央にしたいです。

リンク内容
を参考に、introのcontainerに対して色々値を指定してみたんですが、中央になりません。。。

そもそもcontainerに値を指定する、というやり方で合ってますでしょうか？

合っているならばどのように指定すればよいでしょうか？

助言いただけると幸いです。

...
<div class="section intro">
    <div class="container">
      <div class="column">
        <div class="intro-headding">見出し</div>
        <p class="intro-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </div>
...

.intro.container {
  position:absolute;
 margin: auto;
 top: 0; left: 0; bottom: 0; right: 0;
}

Answer 1

.intro.container {

このセレクタ、つながっちゃってますよね。
これだとintroとcontainer両方のclassを持った要素が対象になるので、提示のhtmlではまったくスタイルが効かないと思います。

とりあえずそこを直すのが先決かなと思います。

Comments

[masaakitsuyoshi]

セレクタの書き方がまだ良く理解できてなかったようです。。。
section intro のcontainerを対象にしたいときは
セレクタは .containerだけでよいのでしょうか？

それだと他のcontainerも対象になると思い .intro.containerにしました。

[NatsumiOki]

考え方はあってるのですが、書き方が間違っているということです。
.introの子要素の.containerを指定したい場合は、半角スペースを入れてください。
↓
.intro .container {

[masaakitsuyoshi]

子要素なのに半角入れると適用されず、半角入れないと適用されてる部分あったので、ちょっと混乱しました。
少し調べてみます。

[NatsumiOki]

質問文の提示のコードに書かれていない部分で、同じclassに対してスタイルの上書きをしてしまっている箇所があったり、同じclass名のdivが入れ子になっていたりするかもしれません。
全体的にコードを見通した方がいいかもしれませんね。

[masaakitsuyoshi]

全くの勘違いでした。複数のクラス名を下のような半角入れない書き方で書いてしまっていました。

<div class="section sample">

.sample.section

[masaakitsuyoshi]

一度見なおして、再度containerにクラスを適用させてみます。

Answer 2

https://teratail.com/questions/44494

Answer 3

セレクタの使い方は、このあたりを参照ください。

【少し高度なCSS文法: 子孫セレクタ | CSS中級編】
http://wp-p.info/tpl_rep.php?cat=css-intermediate&fl=r2

【CSSの書き方とセレクタの話 CSSについて少しずつまとめる① - まさおまっさお】
http://www.masaoblue.com/entry/2016/05/15/195920#２CSSの書き方とセレクタ

【[CSS] CSSの詳細度による「適用順(優先順位)」と「上書き」 | ぶぶりんブログ】
http://buburinweb.wp.xdomain.jp/css-detailing

Comments

[masaakitsuyoshi]

リンクありがとうございます。
拝見します！