CSS/Bootstrap : Tableの中央揃え（vertical-align)が効かない

Question

bootstrap 4を使用しています。
table内の、テキストを中央揃えにしたいのですが、text-alignは効いても、vertical-alignが効きません。誤りをご指摘頂けますと幸甚です。

<div class="col-lg-7 col-xs-12">
      <table class="table table-sm table-bordered">
        <tr>
          <th class="p-details"><h6>出品者</h6></th>
          <td class="p-details"><h6><%= link_to @product.user.user_name, [:user, @product.user] %>さん</h7>
          <%= link_to "不要画面テスト", [@product.user, :user_products] %>さん</h7></td>
        </tr>
        <tr>
          <th class="p-details"><h6>カテゴリー</h6></th>
          <td><h6>イヤリング</h6></td>
        </tr>
        <tr>
          <th class="p-details"><h6>ブランド</h6></th>
          <td><h6><%= @product.brand%></h6></td>
        </tr>
        <tr>
          <th class="p-details"><h6>商品の状態</h6></th>
          <td><h6><%= @product.status == 1 ? "新品同様" : 2? "目立つ傷あり" : "test" %></h6></td>
        </tr>
        <tr>
          <th class="p-details"><h6>発送予定</h6></th>
          <td><h6><%= @product.dispatch == 1? "即日" : 2? "１週間以内" : "test" %></h6></td>
        </tr>
        <tr>
          <th class="p-details"><h6>コメント</h6></th>
          <td><h6><%=@product.memo%></h6></td>
        </tr class="p-details">
        <tr>
          <th><h6>掲載日</h6></th>
          <td><h6><%= @product.posted_at.strftime("%Y/%m/%d %H:%M")%></h6></td>
        </tr>
      </table>
    </div><!--col-->

.p-details{
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  vertical-align: middle;
}

Answer 1

詳細度の影響で効いていないのだと思います。
こんな感じで親要素のclassも追加して指定してみてください。

.table .p-details{
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	vertical-align: middle;
}

Comments

[innjera]

早速有難う御座います！ご教示頂いた通りに、やってみたのですが、写真（追加で加えました）の様に、やはり効かないです・・

[gin]

おや？thはtext-alignも効いてないですか？
とりあえずhtmlが生成された状態のものを掲載してもらえますか？
あと</h7>はコーディングミスなのでそこは修正してください。

[gin]

またイヤリングなどにtext-align:center;が効いているということは上記のコードでは指定していないスタイルがあたっています。
別のところで上書きされてそうですね。

[innjera]

コメント有難う御座います。実は写真が誤っていまして、text-align:center;は全てのセルに効いております。少し今取り込んでおり、写真・コードを修正できないため、追ってご指摘頂いた事項を対応致します。

[gin]

とりあえず画像の状態だとどれもテキストが1行しかないので「vertical-align: middle;」が効いているのかどうか判別できないので修正する際は複数行入っている「th」も用意ください。

[innjera]

承知しました。ご丁寧に有難う御座います。大変助かります。現在コードを書けない場所におりますが、本日中に対応致しますので、お手隙の際に、見て頂けますと幸甚です。

[innjera]

akusanoさんに回答いただいた通り、h要素を抜いたところ、解決しました。。。
色々と有難う御座いました。
ちなみに、ruby (rails)で制作しているのですが、「htmlの生成」ですが、Google Chromeのデベロッパーツールにて出てくる画面をキャプチャするといったやり方以外にあるのでしょうか？（質問がずれていたら申し訳ありません）

[gin]

ソースは右クリックで出てくる「ソースを表示」でいいと思います。
ぐちゃぐちゃならある程度整形したほうがいいですが…

あと補足ですがtable内に書いてダメな要素はないです。
あくまで「見出し」として使う要素なので使い方はいいとは言えないですが…<h6>も書いて大丈夫です。

<h6>を取って縦中央に来たというのであれば別のCSSで<h6>になんらかの指定がされていたということだと思います。
私のところでは<h6>ありきで縦中央になりますし。

[innjera]

早速有難う御座います。なるほど、勉強になります。
試しに、pやh1-h7で試してみましたが、やはりダメでした。。特にh要素に指定はしていないですし、bootstrapのデフォルト設定に原因があるのでしょうか・・・？

[innjera]

調べていたら、bootstrapはデフォルトでp要素の下辺マージンを1remに設定している、というのがありました。。これでしょうか・・・？

[gin]

取ると縦中央にいくんですよね～
<h7>はないタグ(h1からh6まで)なのでそれで効かないとは…不思議ですね…
実物を見てみないことには…ｗ

margin-bottomは影響しますがそれでも1文字分ですからね…
あとpですしｗ

ちなみにbootstrap.cssを読み込んだ状態でも上記のコードだけだと縦中央に来ますよ～
回答した.table .p-details {}でやってますよね？
じゃないとbootstrap.cssの.tableのthにはvertical-align: top;が付いてるので上付きになりますが。

[innjera]

申し訳ありません、、今、<h7>等を改めて加えてみたところ、問題なくverticle-alignが効きました！
.table .p-details {}の半角スペースを抜いて.table.p-details {}で書いていたことが問題の様です・・ご指摘頂いていた点、全てそのとおりでした、、早々にご回答頂いていたのに申し訳ないです。。

[gin]

私のに限らず回答を試すときは下手に手を加えずいったんそのままコピペでやったほうがいいです。

[innjera]

おっしゃる通りです。以後留意します。すみませんでした。。。

Answer 2

h6を全部削除してみてください。

Comments

[innjera]

コメント有難う御座います！修正できました。tableタグにh要素等を入れてはいけないのですね・・・