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

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

ただいまの
回答率

90.34%

  • CSS

    6190questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

要素と擬似要素の関係

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 167

maguzo

score 39

通常のインライン要素(display:table-cellを指定)を使用している場合で
vertical-align: middle;を指定した場合、うまく高さを中央に揃える事ができます。
下記の例で.dicision_A:afterを何も指定しない場合に、要素の中央に揃っている事が確認できております。下記の単純例をご覧ください。

しかしながら、本インライン要素に擬似要素を追加した場合に、高さが勝手に変わってしまいます。下記の失敗例をご覧ください。

修正例で高さが中央からずれてしまった部分を無理やりpadding-topで調整しているのですが、このように擬似要素を指定する事で本体の要素が影響を受けてしまう理由がわからなかったので、原因とあるべき解決方法について、アドバイスをいただけますでしょうか?

どちらもインライン要素として処理するためにdisplay:table-cellを指定しております。
単純例
失敗例
修正例

 <div class="dicision_wrapper">
        <label class="dicision_A" for="[object Object]">A</label>
    </div>


失敗例

.dicision_A{
  height:50px;
  width:25px;
  text-align: center;
  display:table-cell;
  vertical-align: middle;
  background-color: #343434;
  color: #dbdbdb;
 /*  padding-top: 10px; */
}
.dicision_A:after {
content: '';
  display: table-cell;
  position: relative;
  left: 25px;
  top:-16px;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #343434;
}


修正例

.dicision_A{
  height:50px;
  width:25px;
  text-align: center;
  display:table-cell;
  vertical-align: middle;
  background-color: #343434;
  color: #dbdbdb;
  padding-top: 10px; //ここで無理やり調整
}
.dicision_A:after {
  content: '';
  display: table-cell;
  position: relative;
  left: 25px;
  top:-16px;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #343434;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

原因についてはよく分かりませんが、display: table-cell を指定した要素の子に display: table-cell を指定すると、HTML でいう <td> の中に <td> が直接入っているような感じなのでよろしくないんじゃないかと。
子の疑似要素を display: inline-block にするとズレはなくなるんじゃないでしょうか。

そんな感じで table-cell はイレギュラー起こりやすいので、
縦方向中央に揃えたい場合は Flexbox を使うのが良いのではないかと思います。

display: inline-flex;
align-items: center;`

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 07:45

    yhg様
    いつもご回答をいただきありがとうございました。早速試してみたのですが
    inline-blockの場合下記のように、text-align:centerが効かなります
    https://jsfiddle.net/ug45o6kx/5/

    また、flexboxで使用した場合も同様です、、これはブラウザ依存のバグなのか仕様なのか謎です、、
    https://jsfiddle.net/ug45o6kx/6/

    キャンセル

  • 2018/05/07 14:13

    inline-block にした場合は、疑似要素もセンタリング可能になり、その影響が出ているのだと思います。
    .dicision_A に position: relative を指定して、疑似要素は position: absolute でレイアウトしたほうが良いです。

    Flexbox にした場合は、「A」はきっちりテキストの幅、疑似要素の部分は残りの横幅、の2カラムになってるのでセンタリングする余地がない感じです。やはり疑似要素を `position: absolute` にしてしまえば「A」の部分が親要素の横幅と同じになって、センタリングできるようになります。

    https://jsfiddle.net/vyc2k7ze/2/

    キャンセル

  • 2018/05/08 12:11

    ありがとうございます。
    とても勉強になりました。本当にCSSは属性値の指定によって挙動が諸々異なるため、やりながら勉強ですね。
    お力添えに感謝いたします。

    キャンセル

+1

しかしながら、本インライン要素に擬似要素を追加した場合に、高さが勝手に変わってしまいます。下記の失敗例をご覧ください。

.dicision_A:afterpositionrelative(absolutefixedでない)なので、その高さの分だけ.dicision_Aも高くなる、というのが原因です。

.dicision_A:aftertopleftを指定しないようにすると下のようになり、.dicision_Aの高さが増えていることが分かります。position: relativeは自分の外の要素の配置には影響を与えずに自分の位置をずらすというものなので、topleftを指定してもこの高さが増えた状態は変わりません。
:afterが高さに貢献しているスクショ

これを解決するにはposition:abosoluteにすればいいということになります。

縦方向に中心にするには、yhgさんの回答の通りflexboxを使うこともできますし、height: ***; top: 0; bottom: 0; margin: autoでもできます。

JSFiddle Demo

参考
Absolute Centering in CSS - CodePen

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 12:56

    コメントありがとうございます。
    ”topやleftを指定してもこの高さが増えた状態は変わりません。”
    というところが、調べてみますと、relativeを使用する場合に陥りやすい誤認である事
    がわかりました。しっかりとそれぞれのプロパティの仕様を理解する良いきっかけになりました!

    キャンセル

同じタグがついた質問を見る

  • CSS

    6190questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。