CSS文字竖排效果且垂直居中水平居中

分手后的思念是犯贱 2022-04-11 07:51 318阅读 0赞

偶尔网页中会出现竖排文字的排版需求，经常伴随着重直居中、水平居中的要求。这两天试了好多办法，最后打到一个两个元素嵌套来实现的方法，似乎有点复杂，但没有想到简单的办法。先看一下效果（仅在chrome浏览器中调试过）。  
\[align=center\]  
\[img\]http://dl2.iteye.com/upload/attachment/0120/1491/00e3f72a-c46f-332c-83a0-7149c64f7718.png\[/img\]  
\[/align\]  
  
代码如下，很简单。

<!DOCTYPE html>
    <html>
      <head>
        <title>值班情况显示</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style type="text/css">
        	.cell span{
       
        		-webkit-writing-mode: vertical-r;
        		writing-mode: vertical-rl;
        		font-size:80px;
        		font-family:黑体,simhei,Arial;
        		height:4.5em;
        		line-height:1.2em;
        		word-spacing:1.5em;
        		letter-spacing:0.3em;
        		word-break:break-all;
        	}
        	.cell{
       
        		display:table-cell;
        		width:2.8em;
        		height:4.5em;
        		text-align:center;
        		vertical-align:middle;
        		float:left;
        		border:3px solid gray;
        		background-color:#dce6f2;
         	}
        </style>
      </head>
      <body>
    	<div class="cell"><span>张三丰</span></div>
    	<div class="cell"><span>张无忌赵　敏</span></div>
    	<div class="cell"><span>小　昭</span></div>
      </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS垂直水平居中

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

快来打我*/ 2023年01月14日 12:58/ 0 赞/ 110 阅读

相关 [CSS]垂直水平居中

垂直水平居中两种实现方式： 1. .box{ width:200px; height: 200px; backgrou

约定不等于承诺〃/ 2022年11月26日 04:58/ 0 赞/ 244 阅读

相关 CSS水平垂直居中

在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

不念不忘少年蓝@/ 2022年11月12日 08:18/ 0 赞/ 250 阅读

相关 css中让文字水平居中和竖直居中

要让文字在一个标签中水平居中只需要一行代码即可： text-align:center; 要让文字竖直居中的话，需要设置该行字的行高（line-height）：

- 日理万妓/ 2022年08月13日 18:39/ 0 赞/ 197 阅读

相关 CSS文字垂直居中

嗯，内容很少，主要是不太了解CSS的同学可能会找一大堆资料，只为了为一排文字设置一个垂直居中，最后发现怎么就是找不到啊，好气对不对。这里告诉你答案。 1.line-heigh

曾经终败给现在/ 2022年07月14日 12:50/ 0 赞/ 312 阅读

相关 CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中) 示例: <!DOCTYPE html> <html> <head>

ゞ浴缸里的玫瑰/ 2022年06月04日 02:09/ 0 赞/ 337 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 321 阅读

相关 CSS文字竖排效果且垂直居中水平居中

偶尔网页中会出现竖排文字的排版需求，经常伴随着重直居中、水平居中的要求。这两天试了好多办法，最后打到一个两个元素嵌套来实现的方法，似乎有点复杂，但没有想到简单的办法。先看一下效

分手后的思念是犯贱/ 2022年04月11日 07:51/ 0 赞/ 319 阅读

相关 css 垂直居中和水平居中

一、水平居中 1. 行内元素inline、inline-block 行内元素水平居中，直接在父盒子中设置`text-align:center` 2. 块元素

偏执的太偏执、/ 2022年03月14日 18:22/ 0 赞/ 303 阅读

相关 css 样式水平且垂直居中

<div class='parent'> <div class='child'>DEMO</div> </div> .parent {

左手的ㄟ右手/ 2021年09月27日 08:42/ 0 赞/ 273 阅读