CSS样式表进行table水平居中、垂直居中、自动填充

最新推荐文章于 2024-05-16 18:11:47 发布

大帅点兵

最新推荐文章于 2024-05-16 18:11:47 发布

阅读量3.8w

点赞数 4

分类专栏： JAVA

JAVA 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近，在用CSS+DIV做一个静态网页，做完了才发现所有的页面在不同的机器上显示很是有问题，没有进行水平居中和垂直居中，并且宽屏下，两边留白太难看。可是要是修改所有的html页面，可是有700多个~~，还好当时做html页面时设计的样式表还不错，让我感觉到了样式表的方便和强大。

注：还得同时考虑Linux Firefox下的显示情况，因为我们是做Linux的公司啊，出去演示肯定用自己的lLinux操作系统---中标普华Linux操作系统，以下的方法在IE和Firefox下是兼容的。

废话少说，说一下怎么进行这三种样式表现。一般情况下，页面中可以利用align进行页面的居中、靠左或者靠右对齐，但是采用CSS样式表来做更简单一些，尤其是基本的N多页面都写好了，如果挨个页面进行修改非常麻烦，本文介绍了使用CSS进行页面对齐的方式。

同时，为了适应不同的分辨率，例如宽屏显示时，需要进行图片的自动填充。

原来CSS样式表的内容

一般情况下，假设为主布局样式表为main.css，每个页面都继承这个主布局表，没有居中(默认页面左对齐)和自动图片填充的CSS文件的内容如下：

body{

margin:0px

}

水平居中和自动填充

1. main.css修改后的内容，红色为新增的内容

body{

margin:0px auto;

width:1024px; //宽度可自行设定，根据所做页面的实际宽度而定

background-image:url(img_frame/3.png); //3.png为需要填充的一段图片，一般横向填充

background-repeat:repeat-x;//repeat-x代表横向填充。

}

2. 修改index.html

一般情况下，只需要修改最初的html页面即可，注意index.html中的head标签中一定要有这句：
<link href="main.css" rel="stylesheet" type="text/css">
在整个body下面套上一个大的表格，原来的内容保持不变，红色为新增的内容，如下：

<body>

....................................................................

.....................................................................

</td>

</table>

</body>

这样，我们就完成了水平居中和自动填充。

垂直居中和自动填充

可参考水平居中完成，不同的是main.css中要设定height:768px;

而在index.html中修改为：

一般我们常用的是水平居中、垂直居中和自动填充同时布局

1. main.css修改后的内容，红色为新增的内容

body{

margin:0px auto;

width:1024px; //宽度可自行设定，设定成1024则一般的宽屏和标屏显示都正确

height:768px; //

background-image:url(img_frame/3.png); //3.png为需要填充的一段图片，一般横向填充

background-repeat:repeat-x;//repeat-x代表横向填充。

}

2. 修改index.html

<body>

....................................................................

.....................................................................

</td>

</table>

</body>

这样，我们就完成了水平居中、垂直居中和自动填充。

如果有问题请给我留言，大家一起学习

大帅点兵

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
CSS样式表进行table水平居中、垂直居中、自动填充

最近，在用CSS+DIV做一个静态网页，做完了才发现所有的页面在不同的机器上显示很是有问题，没有进行水平居中和垂直居中，并且宽屏下，两边留白太难看。可是要是修改所有的html页面，可是有700多个~~，还好当时做html页面时设计的样式表还不错，让我感觉到了样式表的方便和强大。注：还得同时考虑Linux Firefox下的显示情况，因为我们是做Linux的公司啊，出去演示肯定用自己的lLi
复制链接

扫一扫