<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>居中div演示效果</title>

<style type="text/css">

.align-center{

margin: auto; /* 居中 这个是必须的，，其它的属性非必须 */

width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

background:red; /* 背景色 */

text-align:center; /* 文字等内容居中 */

}

</style>

</head>

<body>

<div class="align-center">居中div演示效果</div>

</body>

</html>

Div内容居中的更多相关文章

  1. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  2. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  3. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  4. div内容上下居中

    今天无聊闲逛技术群,听一哥们说要在div里面居中span内容. 第一印象:vertical-align: middle; 结果失效.因为他只对属于inline的元素或是inline-block.tab ...

  5. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  6. div宽高不确定，内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  7. css3实现左右div高度自适应且内容居中对齐

    主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...

  8. 使用 margin 让div块内容居中

    问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为 自动 ...

  9. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

随机推荐

  1. vue项目中微信jssdk在ios签名失败

    一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...

  2. Two strings CodeForces - 762C (字符串,双指针)

    大意: 给定字符串$a$,$b$, $b$可以任选一段连续的区间删除, 要求最后$b$是$a$的子序列, 求最少删除区间长度. 删除一段连续区间, 那么剩余的一定是一段前缀和后缀. 判断是否是子序列可 ...

  3. Charles学习（一）之macOS Charles 4.x版本的安装、激活、使用以及软件功能了解

    前言 Charles是mac上一款比较好用的抓包工具,那么我们什么情况下需要用到抓包工具呢?比如我想查看一个接口请求的参数.返回值,还有移动设备上的http/https请求. Charles是一个HT ...

  4. CF1151F Sonya and Informatics

    cf luogu 我们最终要的序列一定是前面全是0,后面全是1,假设总共\(m\)个0,那么这等价于前\(m\)位0的个数为\(m\).当然一开始可能数量没有\(m\) 那就把前\(m\)位0的数量作 ...

  5. js介绍及语法结构

    javaScript它是一门动态的,弱类型的,解释型面向Web的编程语言.虽然名字里有Java但其它与Java无关.它可以用来增强页面动态效果,实现页面与用户之间的实时,动态交互. javascrip ...

  6. Vue-cli脚手架起步

    1.安装node.js 下载地址:http://nodejs.cn/download/ 测试是否安装成功 node -V 检测安装包 npm -v 检测npm 2.安装webpack npm inst ...

  7. WebSocket的兼容性

    https://github.com/sockjs/sockjs-client https://socket.io/ https://github.com/gimite/web-socket-js h ...

  8. SpringMVC基础02——HelloWorld

    1.搭建环境 博主使用的环境是IDEA2017.3,首先我们需要创建一个maven项目父项目,创建一个project,选择maven,之后点击next 添写当前项目的坐标,之后点击next 填写项目名 ...

  9. MySQL快速清空表数据

    truncate table 可以不删除表的情况下,快速情况表数据

  10. typedef 返回类型(*Function)(参数表) ——typedef函数指针

    //首先看一下函数指针怎么用 #include <iostream> using namespace std; //定义一个函数指针pFUN,它指向一个返回类型为char,有一个整型的参数 ...