中心对齐的特殊符号

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">›</p>  </div>

提前致谢

Answer 1

试试这个CSS：

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

.c {
     font-size: 80px;   
   }

你提到的CSS中有一个拼写错误（“tabel”而不是“table”）。此外，“。”之间存在间隙（空白区域）。 （点）＆amp;第一个CSS样式的“d”类

Answer 2

我刚刚看了一下这个问题，我认为使用CSS可能无法正确渲染符号或给出所需的结果，但对Text来说效果不错。可能是浏览器限制。

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

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结果。