css样式 关于 display:table;的应用

.zz{display:table;}
.xx{width:200px;
height:200px;
display:table-cell;
background-color:yellow;
text-align:center;
vertical-align:middle;}
HTML代码如下
<div class=zz>
<div class=xx>我想文字垂直居中 我想文字垂直居中 我想文字垂直居中 我想文字垂直居中
</div>
</div>
但是我应用 vertical-align:middle 还是没有效果

第1个回答  2013-03-21
想要文字垂直居中HTML代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.zz{display:table; width:20px;}.xx{width:200px; height:200px; display:table-cell; background-color:yellow; text-align:center; vertical-align:middle;}
</style>
</head>
<body>
<center>
<div class=zz>
<div class=xx>我想文字垂直居中 我想文字垂直居中 我想文字垂直居中 我想文字垂直居中 </div>
</div>
</center>
</body>
</html>追问

这个 我放上去 还是不行

追答

你用的是dreamweaver编译器吗?要是不行的话你就新建一个记事本把代码复制进去然后再把记事本的后缀名改为.html后双击就可以看到效果了。
你试下这个代码,刚才可能发错了。

无标题文档

.zz{display:table; width:20px;}.xx{display:table-cell; background-color:yellow;text-align:center; vertical-align:middle;}

我想文字垂直居中 我想文字垂直居中 我想文字垂直居中 我想文字垂直居中

本回答被网友采纳
第2个回答  2021-05-19

Vue实践-CSS样式position/display/float属性对比使用

第3个回答  2013-03-21
用line-height:200px追问

用这个 多行字 会出div 的 界限的 。。

追答

不会,怎么会呢?display:table-cell;这个不要用

追问

DIV的 固定高度都被打乱了 调节line-height 外层div 的高度跟着自动扩展。。。这样不好

第4个回答  2013-03-21
不会是你的浏览器不支持吧?
第5个回答  2013-03-21
那你给样式的宽度就给一个字那么宽就行了

只有这样了

display:table什么意思?怎么用?能否举个小例子?
在CSS中,display属性用来设置元素的显示类型。其中,"display: table"并不是真正地使一个元素表现得像HTML中的标签,而是应用了一些类似表格的显示特性。这意味着你可以使用某些与表格布局相关的技巧来布局和定位元素,而不必真的创建一个HTML表格。二、用法 要使用"display: table",你只需在CSS样式中...

为什么清除浮动要使用display: table?
使用display: table;可以将伪元素转换为块级元素,这样就能够在上面应用clear:both;来清除浮动。选择display: table;而非display: block;的原因在于,前者还能够避免布局问题,特别是外边距塌缩。边距塌缩是CSS中常见现象,当两个垂直方向的块级元素相邻,且两者之间无内容、填充或边框分隔时,它们之间的...

display:table-cell;表示什么
答案:display:table-cell是一种CSS样式属性,用于将元素呈现为表格单元格的形式。详细解释:1. display属性的作用 在CSS中,display属性用于定义元素的显示类型。除了常见的block和inline,还有一些特殊的值,如table、table-row等,用于模拟表格的某些部分。2. display:table-cell的含义 当为元素设置display...

用层和布局表格布局有什么区别?
1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格 2.border-collapse:separate;边框独立,就像表格没有合并单元格以前 3.display:table-row;将.row作为表格行tr显示 4.display:table-cell;将.row的下级div作为表格单元格td显示 5.然后定义宽度 这里还使用了 border-spa...

display:table;是什么意思? html中(css)
display:table 使该元素按table样式渲染 就是添加一个表格样式

CSS中,display的作用是什么?
display 显示状态 display:none 隐藏 display:block 块显示 display:inline 内嵌 display:table 表格显示 display:list-item 项目列表 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 ...

用div+css display:table;属性制作的table表格,在Ie中无法实现,貌似Ie...
所以他会根据你所给的类容把表格撑开。而且给标签定义样式的时候。比如像margin和padding值在ie里不显示。有的还不显示。。你也可以先给table里的td固定好width值和height值。然后在里面套用表格里的文本区域。给这个文本域定义一下显示宽度。然后超过这个宽度会自动换行。(white-space:normal当定义宽度...

求大神来解决!!!css display: table布局 页面宽度超出怎么解决_百度...
应该是你没写你浏览器的私有box-sizing:border-box属性,所以看似你写了,其实没生效可能。或者出现如下错误:.cart-store{width: 100%;padding:10px 3%;} 这里宽度已经100%了,padding的左右你又加了3%,总宽度是106%,当然会超出屏幕。总宽度里面要减去这百分之6的:width:94%;望采纳。

css中清除浮动的方法有哪些
`元素,并为其应用`.clearfix`类,该类包含`clear: both;`样式,以清除浮动。二、使用伪元素清除浮动 可以使用CSS伪元素`:after`来清除浮动。通过在父元素中添加`clearfix`样式,并在其`:after`伪元素中设置`content: ""; display: table; clear: both;`,可以有效地清除浮动。这种方法不需要添加...

怎么用css做网页左边的导航怎么用css做网页左边的导航框
CSS导航菜单水平居中的方法?1、首先打开我们的测试编辑工具如图所示新建一个项目。2、然后打开index.html文件,输入以下代码。3、首先第一个方法就是使用display:inline-block将ul标签设置成行内块级元素然后将li标签设置为左浮动即可。4、第二种方法就是就是将p设置为display:table;将ul设置成display:...

相似回答