`

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

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




代码如下，很简单。 
<!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>
  • 大小: 19.9 KB
分享到：
| 豆豆趣事[2016年09月]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css实现文字竖排效果.rar

    在某些场景下，我们可能需要将文字排列成垂直方向，而不是传统的水平排列，例如创建古典风格的网页或者优化移动端阅读体验。本教程将详细介绍如何使用CSS实现文字竖排效果。 首先，我们可以使用`writing-mode`属性...

    网页文字竖排三法很好的(⊙o⊙)…

    综合来看，图片法适用于文字较少且不需要频繁修改的情况，软回车法虽然简单但效率较低，而CSS法则提供了灵活且高效的方式，尤其适合大量文本的竖排处理。对于追求网页性能和易于维护的开发者来说，CSS法是最佳选择。...

    radio和文字垂直对齐

    radio和文字垂直对齐，单选框和文字垂直对齐，兼容各大主流浏览器，附带样例代码，一看就会，一用网不了！呵呵

    使用CSS实现文字的竖排的简单方法

    本文将详细讲解如何使用CSS中的`writing-mode`和`text-align`属性来实现文字的竖排，并结合实际例子来展示其用法。 ### 1. `writing-mode`属性 `writing-mode`属性定义了文本在元素内的书写方向。它允许我们改变...

    竖排文字弹出层

    `则可确保内容在容器内水平和垂直居中。 3. **JavaScript/jQuery**：这两个技术主要用于控制弹出层的显示和隐藏。例如，通过监听用户的点击事件，调用`show()`和`hide()`方法来控制弹出层的可见性。此外，还可以...

    微信小程序简繁体转换微信个性签名居中文字处理工具

    在这个特定的微信小程序中，“微信个性签名网名生成繁体字体转换器”聚焦于文字处理功能，包括简体和繁体字的相互转换、个性签名的居中展示、以及各种创意文字效果。 1. **简体繁体转换**：简体字是中国大陆最常用...

    CSS实现全屏切换效果的示例代码

    `属性确保页面中的文字能够水平和垂直居中，并且字体颜色为白色。 - 通过`float: left;`和设置宽度百分比的方式，可以将多个div元素排列在一行内，实现水平布局。 ### 图片竖排展示全屏切换效果实现 图片竖排展示...

    css中文排版心得

    3. **竖排文字**：`writing-mode`属性可以改变文字的排列方向，`tb-rl`值将文字排列为从上到下，从右到左。配合`direction`属性可以进一步调整文字方向。 4. **项目符号**：`list-style`属性用于定义列表项的符号，...

    CSS 图片横向排列实现代码

    总的来说，这个CSS图片横向排列实例提供了一个基本的布局策略，适用于简单的产品展示或其他需要水平排列图片的场景。理解并掌握这种布局方式是成为熟练网页设计师的基础，而随着技术的发展，不断学习和探索新的布局...

    css网页布局中文字排版的属性和用法

    "css网页布局中文字排版的属性和用法" css网页布局中文字排版的相关属性和用法是一个非常重要的知识点。在网页布局中，文字排版的效果直接影响着网站的整体美观度和用户体验。因此，掌握css网页布局中文字排版的...

    web15种滚动代码

    13. **由中间向两边移动的文字**：使用居中对齐的`&lt;P&gt;`标签和`&lt;MARQUEE&gt;`标签，使文字从中间向两侧移动。 代码示例：`&lt;P align=center&gt;&lt;MARQUEE ...&gt;由中间向两边移动的文字...&lt;/MARQUEE&gt;&lt;/P&gt;` 14. **渐隐渐现滚动...

    dreamweaver珍藏3

    在文字与图像的排版中，可以利用图像属性设置对齐方式，如左对齐或右对齐，并调整边距以达到理想效果。 二、交互式图像和隐藏内容 在鼠标经过图像时显示另一幅图像，这可通过设置图像的交互行为来实现。而隐藏指定...

    CSS 网页布局中文排版的9则技巧

    - 文字对齐通过`text-align`设定，包括`left`(左对齐)、`center`(居中)、`right`(右对齐)和`justify`(两端对齐) 3. **竖排文字**： - 使用`writing-mode`属性可以实现文字竖排，如`writing-mode: tb-rl;`表示上到...

    html技巧

    background-position:center}&lt;/STYLE&gt;&lt;/head&gt;&lt;body bgproperties="fixed"&gt;&lt;/body&gt;&lt;/html&gt;`用于设置页面背景图，并将其居中显示且不重复。这对于创建视觉效果一致的页面非常有帮助。 ### 9. 光标样式自定义 使用CSS...

    jquery实现红色竖向多级向右展开的导航菜单效果

    在这个例子中，jQuery被用来实现鼠标悬停事件（hover）和动态地向元素添加或删除CSS类，从而达到展开和收起子菜单的交互效果。具体代码通过$(document).ready()函数确保了文档加载完毕后执行，这是jQuery中常用的一...

    html登录页面login049.rar

    在资源文件中，`banner.jpg`可能是登录页面的背景图片，这可以通过CSS的`background-image`属性设置，通过调整`background-size`和`background-position`属性可以控制背景图片的展示方式，如全屏覆盖或居中显示。...

    javascript常用代码.pdf

    background-position:center}`，这样可以设置一个不重复且居中的背景图像。 5. **CSS光标样式**： - CSS提供了多种预定义的光标样式，例如`auto`、`default`、`hand`、`wait`等，通过`cursor`属性设置，如`cursor...

    常用的JS,web开发有用哦

    - 实现文字垂直排列的效果。 ##### 1.54 Window自带打印各功能 - 利用浏览器内置的打印功能。 ##### 1.55 Redo和Undo - 实现页面内容的重做和撤销功能。 ##### 1.56 Math函数 - JavaScript提供的数学函数，如`...

Magicbox
Global site tag (gtag.js) - Google Analytics