html - 中央揃えの特殊記号

Question

CSS と HTML コードは次のとおりです。

CSS:

. d {
    display: table;
    } 
.c {
   font-size: 80px;
   display: table-cell; 
   vertical-align: super; 
   text-align: center;
   }

html:

  <div class="d"><p class="c">›&lt;/p>  </div>

前もって感謝します

Answer 1

この質問をもう一度見たところ、CSS を使用するとシンボルが正しくレンダリングされないか、望ましい結果が得られない可能性がありますが、テキストには適していると思います。ブラウザの制限の可能性があります。

ここに2つの解決策があります：

1.

に置き換えvertical-align: super; てvertical-align: middle;から、position:relative; を追加します。上:-2px;

. d {
 display: table;
} 
.c {
 font-size: 80px; 
 border: 1px solid  #666666;
 display: table-cell;
 vertical-align: middle;
 position:relative; top:-2px;
}

2.

テーブルを使用すると、より適切にレンダリングされ、望ましい結果が得られます。

<table style="width: 100%;">
  <tr>
    <td style="vertical-align: middle;border:1px solid  #666666; font-size: 80px">
          >
     </td>
  </tr>
</table

jsbinで結果を確認してください。