包含多个table的html整体居中,css实现div或table居中，文字不居中【Chrome/Firefox/IE测试通过】...

之前设计网页，如果希望div或table居中，总是用

把它包起来，但是这样的结果，div或table虽然居中了，但div或table里面的文字也居中了，这是不符合设计者意愿的。那么，我们能否用css实现div或table居中，文字不居中呢？答案是肯定的，本文将给你介绍如何实现此效果。

css实现div或table居中文字不居中

首先，介绍css的写法。.countainer{

margin:auto;

width:600px;

height:100px;

background-color:#cccccc;

}

这里我们要注意一个关键代码，就是 margin:auto; ，这个代码就是起到可以让div或table居中，而文字不居中的功效。

了解这个后，剩下的，就是html中div或table引用此类 .countainer 了，看看下面的实例。

div代码：

div居中, 而里面的文字不居中

table代码：

table居中, 而里面的文字不居中

div或table使用类写法 class="countainer" ，代码并不复杂。

最后，附上完整的html代码：

让div+css的div居中, 而里面的文字不居中的做法

.countainer{

margin:auto;

width:600px;

height:100px;

background-color:#cccccc;

}

div居中, 而里面的文字不居中

table居中, 而里面的文字不居中

margin:auto 可以让所有html元素居中

通过上述例子，看到 margin:auto 可以让div或table居中，其实，它可以让所有html元件居中，如：

、

、等元素。

本文实例演示及源码下载

您可能对以下文章也感兴趣

包含多个table的html整体居中,css实现div或table居中，文字不居中【Chrome/Firefox/IE测试通过】...相关推荐

怎么让html滚动字幕居中,CSS设置DIV窗口上下居中无滚动条
前端开发中,免不了居中的需求.对于居中有很多方法,本次介绍一个不用js获取窗口,纯css给div"肉眼上的"上下左右居中,并且没有滚动条的实例.为什么说是"肉眼上的&qu ...
html 绝对位置居中,如何在div中对绝对定位元素进行居中？
响应解这里有一个很好的解决方案用于响应性设计或未知尺寸总体而言如果你不需要支持IE8和更低的..centered-axis-x { position: absolute; left: 50%; tr ...
ie css居中,css实现div水平、垂直居中兼容chrome、ie8
示例1 chrome33.ie8测试通过: 复制代码代码如下: /* 固定宽高div,在浏览器中保持水平.垂直居中 */ #div1 { width:400px; height:300px; posi ...
html table字体居中 css,CSS如何让DIV和table居中但是让其中的文字不居中
这篇文章主要为大家详细介绍了CSS如何让DIV和table居中但是让其中的文字不居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 我们在写网页代码的时候经常会 ...
csstable跨列居中_CSS进阶11-表格table
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录.) 1. 表格简介本文定义了CSS中表格的处理模型.这种处理模式的一部分就是布局.对于 ...
html中页面整体居中,css实现网页内容整体居中的三种方法总结
下面我们来看一款利用css实现div中内容居中的方法,下面整理了三种css实现网页内容整体居中方法,希望对各位朋友会有所帮助. 例代码如下复制代码 -//W3C//DTD XHTML 1.0 Tr ...
html知识笔记（二）——div、table、a标签
div标签:我们把一些标签放进<div>里,划分出一个独立的逻辑部分.为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这 ...
CSS实现文字少居中换行居左
"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示." 效果如上,如果直接居中的话会出现这种效果: 实现方式如下: ...
html文字环绕居中图,CSS实现模拟float: center文字左右环绕图片的效果
什么是文字左右环绕图片?就是下图的效果: 效果的CSS代码可以点击这里查看在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果. 经常会有小伙伴问: ...

包含多个table的html整体居中,css实现div或table居中，文字不居中【Chrome/Firefox/IE测试通过】...

包含多个table的html整体居中,css实现div或table居中，文字不居中【Chrome/Firefox/IE测试通过】...相关推荐

最新文章

热门文章