`
royzhou1985
  • 浏览: 253469 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Div中文字居中

    博客分类：
  • CSS
IEFirefoxHTML 
阅读更多 
<html>
	<head>
		<title>DIV中文字垂直居中</title>
		<style type="text/css">
			/*定义最外层*/
			*{
				margin:0;
				padding:0
			}
			#outer{
				position:relative;
				width:expression(document.body.clientWidth);
				height:expression(document.body.clientHeight);
				border:1px solid #000
			}
			/*for ie*/
			#middle{
				position:absolute;
				top:50%
			}
			#inner{
				position:relative;
				top:-50%;
				width:100%;
				text-align:center
			}
			/*for firefox*/
			#outer[id]{
				position:static;
				display:table
			}
			#middle[id]{
				position:static;
				display:table-cell;
				vertical-align:middle
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="middle">
				<div id="inner">
					文字垂直居中<br/>文字垂直居中<br/>
					文字垂直居中<br/>文字垂直居中<br/>
					文字垂直居中<br/>文字垂直居中<br/>
					文字垂直居中<br/>文字垂直居中<br/>
					文字垂直居中<br/>文字垂直居中<br/>
					文字垂直居中<br/>文字垂直居中<br/>
				</div>
			</div>
		</div>
	</body>
</html>

国外的一种做法
分享到：
| Ajax 封装
评论
发表评论

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

相关推荐

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    div中多行文字垂直居中

    在网页设计中，让多行文字在`div`元素中垂直居中是一项常见的需求，尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...

    控制DIV中文字绝对居中的简单方法

    水平居中：&lt;div align=center&gt;Content&lt;/div&gt; 垂直居中：&lt;div xss=removed&gt;Content&lt;/div&gt; 两者结合，就可以绝对居中了： 复制代码代码如下: &lt;div xss=removed align=”center”&gt;Content&lt;/div&gt; 不过对于垂直居中，...

    PeterChen1997#Frontend-Repo#2-div水平垂直居中方法1

    div水平垂直居中方法绝对定位(margin:auto实现居中)/* margin设置为auto实现绝对定位元素的垂直居中 */绝对定位(margin 负值实现

    div的两列居中放置并对每个div设计css样式

    我们的目标是让这两个子div在大容器div内部居中显示，并且对每个div元素设计了特定的CSS样式。这样的布局常用于创建具有侧边栏和主体内容区的网页。 首先，要实现两列布局并让它们居中，我们可以采用一个外层的容器...

    html中对文本实现垂直居中的方法

    在探讨HTML中文本垂直居中的方法时，我们深入解析了三种不同的策略，这些策略涵盖了从简单的单行文本到复杂的多行未知高度或固定高度文本的处理。每种方法都有其独特之处，适用于不同场景下的需求。 ### 单行垂直...

    富文本summernote.js 图片居中

    在该事件的回调函数中，添加一个操作，将新插入的图片包裹在一个具有居中样式的`div`元素内，如下： ```javascript // 假设原插入图片的代码如下 var callback = function (url, image) { editor.insertImage...

    Div网页布局（战神中文网）附

    在"Div网页布局（战神中文网）附"这个资源中，可能包含了使用Div布局的示例代码、Flexbox和Grid的介绍，以及相关工具的使用方法。通过学习这些内容，开发者可以提升网页布局设计的能力，制作出更加美观、响应式的...

    div练习搞内容

    `div` 全称为 "division"，中文可译为"分隔"或"分区"，它用于组织和布局网页内容。`div` 标签是 HTML 中的一个块级元素，常用来创建容器，以便对其他HTML元素进行组合、定位和样式化。在这个“div练习搞内容”的项目...

    网页布局 CSS简单实现垂直居中

    中文译文：...经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中，相信这也是很多设计师喜欢做的事情。首先，我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离，然后我们需要设

    DIV+CSS布局网站主页及DIV命名-领创教育.docx

    3. 对齐方式：页面一般居中显示，特殊情况可调整为居顶或居左。 4. VI标准化：Logo通常是GIF格式，尺寸为88x31像素，大小小于7KB，字体一般采用中文宋体，字号12px和14.7px。 通过遵循这些原则和规范，可以创建出...

    CSS line-height行高上下居中垂直居中样式属性

    &lt;div class="jb51 jb512"&gt;我高度为30px, 实现上下居中&lt;/div&gt; ``` 在这个例子中，`.jb511`设置了行高20px，使得多行文本有合适的行间距；而`.jb512`设置了行高和高度均为30px，使得单行文本在30px高的容器内垂直居中...

    CSS+DIV 拼图(26个英文字母)

    `&lt;head&gt;`部分包含元信息，如字符编码设置为`gb2312`，确保中文正确显示，以及页面标题`Letters`。 在CSS部分，我们看到一些通用的样式重置，目的是消除浏览器默认的样式差异，确保一致的显示效果。例如，所有元素的...

    Html\CSS+DIV学习笔记(史上最实用的CSS笔记)

    12. **垂直居中**：通过设置行高等于元素高度，可以使文本在垂直方向上居中，但需注意内容宽度不超过元素宽度。 13. **重置默认值**：CSS允许覆盖XHTML的默认样式，以实现自定义设计。 14. **CSS应用方式**：这就...

    直接使用的微量代码div弹窗

    `&lt;div&gt;`是HTML中的一个块级元素，全称为“division”，中文译为“分区”或“分组”。它可以用来组织文档结构，添加样式或进行布局控制。通过CSS，我们可以设置`&lt;div&gt;`的各种属性，如宽度、高度、颜色、边框等，使其...

    line-height使文本居中的3像素bug问题

    在网页制作中，文本居中是一个常见的需求，而line-height属性正是用来调整行内元素中文本垂直对齐的关键。然而，有时候我们可能会遇到一个看似"bug"的现象，即使用line-height进行居中时，文本与容器之间会有3像素的...

    css+div 速查手册

    `text-align` 用于对齐文本，如左对齐、居中或右对齐。 **3. 布局管理** CSS中的盒模型是理解布局的关键，它包括`width`、`height`、`padding`、`border`和`margin`。`display`属性可以设置元素的显示方式，如`...

    CSS+DIV学习笔记(史上最实用的CSS笔记).pdf

    1. 垂直居中：通过设置行高等于元素高度，实现文字垂直居中，但需注意内容宽度不超过元素宽度。 2. CSS编辑工具：可以使用各种工具辅助编写CSS，提升效率。 【总结】 学习CSS+DIV是构建现代网页的基础，通过掌握...

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