要素と擬似要素の関係

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

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

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

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

HTML
1　<div class="dicision_wrapper">
2		<label class="dicision_A" for="[object Object]">A</label>
3	</div>
4

失敗例

CSS
1.dicision_A{
2  height:50px;
3  width:25px;
4  text-align: center;
5  display:table-cell;
6  vertical-align: middle;
7  background-color: #343434;
8  color: #dbdbdb;
9 /*  padding-top: 10px; */
10}
11.dicision_A:after {
12content: '';
13  display: table-cell;
14  position: relative;
15  left: 25px;
16  top:-16px;
17  width: 0;
18  height: 0;
19  margin-top: -5px;
20  border-top: 5px solid transparent;
21  border-right: 6px solid transparent;
22  border-bottom: 5px solid transparent;
23  border-left: 6px solid #343434;
24}

修正例

CSS
1.dicision_A{
2  height:50px;
3  width:25px;
4  text-align: center;
5  display:table-cell;
6  vertical-align: middle;
7  background-color: #343434;
8  color: #dbdbdb;
9  padding-top: 10px; //ここで無理やり調整
10}
11.dicision_A:after {
12  content: '';
13  display: table-cell;
14  position: relative;
15  left: 25px;
16  top:-16px;
17  width: 0;
18  height: 0;
19  margin-top: -5px;
20  border-top: 5px solid transparent;
21  border-right: 6px solid transparent;
22  border-bottom: 5px solid transparent;
23  border-left: 6px solid #343434;
24}

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

回答2件

ベストアンサー

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

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

css
1display: inline-flex;
2align-items: center;`

投稿2018/05/06 19:33

yhg

総合スコア2161

maguzo

2018/05/06 22:45

yhg様いつもご回答をいただきありがとうございました。早速試してみたのですが inline-blockの場合下記のように、text-align:centerが効かなります https://jsfiddle.net/ug45o6kx/5/ また、flexboxで使用した場合も同様です、、これはブラウザ依存のバグなのか仕様なのか謎です、、 https://jsfiddle.net/ug45o6kx/6/

yhg

2018/05/07 05:13

inline-block にした場合は、疑似要素もセンタリング可能になり、その影響が出ているのだと思います。 .dicision_A に position: relative を指定して、疑似要素は position: absolute でレイアウトしたほうが良いです。 Flexbox にした場合は、「A」はきっちりテキストの幅、疑似要素の部分は残りの横幅、の2カラムになってるのでセンタリングする余地がない感じです。やはり疑似要素を `position: absolute` にしてしまえば「A」の部分が親要素の横幅と同じになって、センタリングできるようになります。 https://jsfiddle.net/vyc2k7ze/2/

maguzo

2018/05/08 03:11

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

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

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

.dicision_A:afterはpositionがrelative(absoluteやfixedでない)なので、その高さの分だけ.dicision_Aも高くなる、というのが原因です。

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