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 可能无法正确呈现符号或给出所需的结果，但对 Text 效果很好。可能的浏览器限制。

我在这里有两个解决方案：

1.

替换vertical-align: super; 为vertical-align: middle;然后添加位置：相对；顶部：-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以获取结果。

Answer 2

试试这个 CSS：

.d {
     display: table;
     vertical-align:middle;
   }

.c {
     font-size: 80px;   
   }

提到的 CSS 中有一个错字（“tabel”而不是“table”）。此外，“。”之间还有一个间隙（空白）。第一个 CSS 样式中的 (dot) & "d" 类