在网页制作的过程中，为方便读者的阅读，会把网页内容限定在一个较小的方框中，并居中显示，如何实现这一功能呢？

1）把正文放在一个<div>标签中，只要这个标签居中整个网页就居中了。

<div id="text"> </div>

2）接下来要介绍一种方法：负边框，即 margin 的值为负

#text{

    padding-left: 50%;

    width: 1000px;

    margin-left: -500px

}

这样页面就居中了。

转载自个人网站，注明出处：http://www.cirno.win/insert/page.php?id=7

css实现页面居中的一种方法的更多相关文章

  1. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  2. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  3. css隐藏元素的几种方法与区别

    css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...

  4. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  5. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  6. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  7. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  8. 使用CSS、JS的几种方法

    引用CSS到html网页里的4种方法 1.行内式 在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用     <div style="widt ...

  9. 纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

随机推荐

  1. CentOS7 开源跳板机(堡垒机) Jumpserver

    开源跳板机(堡垒机)Jumpserver 环境 CentOS 7   x64       关闭 selinux  firewalld jumpserver: 172.24.0.14 testserve ...

  2. COM问题

    因为应用程序正在发送一个输入同步呼叫,所以无法执行传出的呼叫.

  3. iOS 之UICollectionView 之原理介绍

    0. 简介 参考:支持重排的iOS9 UICollectionView 参考:http://www.cnblogs.com/langtianya/p/3902801.html 参考:http://ww ...

  4. IOS之富文本编辑

    之前做项目时遇到一个问题:          使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结 ...

  5. X-002 Exyson4412芯片启动过程分析

    移植u-boot到FriendlyARM Tiny4412开发板上,首先我们需要对Samsung Exyson4412芯片的启动方式.系统时钟初始化.串口初始化.内存初始化以及开发板的内存地址空间分配 ...

  6. tp框架命名空间

    命名空间:相当于虚拟的目录在tp里面主要为了实现自动加载类 TP框架下有一个初始命名空间(相当于根目录)初始命名空间:ThinkPHP\Library 在初始命名空间下又包含很多根命名空间这些根命名空 ...

  7. STM32 驱动1602液晶

    利用STM32f103c8t6单片机驱动1602A液晶进行显示功能 上图即为写入信息后的效果图 本人用的是STM32的核心系统,无任何外设 库函数:3.5版本的库函数 驱动模式:采用4线驱动模式 供电 ...

  8. 基于STM32的USB枚举过程学习笔记

    源:基于STM32的USB枚举过程学习笔记 基于STM32的USB枚举过程学习笔记(一) 基于STM32的USB枚举过程学习笔记(二) 基于STM32的USB枚举过程学习笔记(三) 基于STM32的U ...

  9. ubuntu内核的编译安装

    原创声明:转载请注明出处. 一.操作环境: 1.ubuntu版本 2.linux原有内核版本 3.要安装的linux内核版本 linux-3.16.39 二.新内核的编译和安装 1.首先下载linux ...

  10. 【bug】java.lang.NoSuchMethodError: android.widget.TextView.setBackground

    安卓的背景色设置需要根据SDK的版本来分情况考虑: if (Build.VERSION.SDK_INT >= 16) { textView.setBackground(null); } else ...