设置div中的div居中显示

方法一、

<div class='big'>

    <div class='small'>box1</div>

 </div>

style样式:
.big{
height:200px;
width:200px;
border:black solid 1px;
position:absolute;
left:150px; }
.small{
height:100px;
width:100px;
background-color:green;
position:relative;
left:100px;
top:100px;
margin-top:-50px;
margin-left:-50px;
border:black solid 1px;
}

方法二、

div class='big2'>

    <div class='small2'>box3</div>

 </div>

.big2{
height:200px;
width:200px;
border:black solid 1px;
text-align:center; }
.small2{
height:100px;
width:100px;
background-color:green;
margin:50px auto; //外面的div高度的一半
border:black solid 1px;
}

设置div中的div居中显示的更多相关文章

  1. div中的内容居中

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

  2. div中嵌套div水平垂直居中

    div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...

  3. java中关于窗体居中显示问题

    最近在学着用java写qq聊天程序,首先是登录和聊天界面,书上没有给出居中显示,通过上网查找知道有两种方案 先说第一种方法,也是以前用的方法 /获得屏幕大小Dimension screenSize = ...

  4. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  5. css div中内容绝对居中(多行内容)

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

  6. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  7. 小 div在大 div中左右上下居中

    <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...

  8. 让div中的table居中

    div 标签上写  style="text-align:center" div中的table中写 style="margin:auto;"  <table ...

  9. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

随机推荐

  1. .Net调用Java端带有WS-Security支持的Web Service各方案实战【转】

    原文:http://www.xuebuyuan.com/641669.html 到现在为止,我们AEP平台已经发布很长一段时间了,也有很多ISV接入并上线了,就语言而言,目前主要有三类:Java..N ...

  2. Mac OS下面安装mysql以及mysql常用命令

    使用brew安装mysql brew install mysql 安装成功后使用下面命令启动/关闭服务 brew services start mysql brew services stop mys ...

  3. JZ2440 裸机驱动 第5章 GPIO接口

    本章目标:     掌握嵌入式开发的步骤:编程.编译.烧写程序.运行     通过GPIO的操作了解软件如何控制硬件 5.1 GPIO硬件介绍     S3C2440A有130个多功能输入/输出口引脚 ...

  4. ExtJs 扩展类CheckColumn的使用(事件触发)

    [javascript] view plain copy print? 使用 Extjs 在进行数据库编程经常会遇到 checkbox 的问题(奇怪网上却没有此类文章不知道其他人是怎么解决的,在此贴上 ...

  5. try catch finally ,try 中有return时怎么执行

  6. php7新特性一览

    1.太空船操作符 用于比较2个表达式,例如当\(a小于,等于或大于\)b时,分别返回-1,0,1 php echo 1 <=> 1; //0 echo PHP_EOL; echo 1 &l ...

  7. [Android] 开发第六天

    Android 布局介绍 LinearLayout 线性布局 RelativeLayout 相对布局 TableLayout 表格布局 FrameLayout 帧布局 ConstraintLayout ...

  8. Carrying per-request context using the HttpRequestMessage.Properties

    In a Web API application, I use Castle Windsor to supply services configured with PerWebRequest life ...

  9. MySQL与PostgreSQL相比哪个更好?

    网上已经有很多拿PostgreSQL与MySQL比较的文章了,这篇文章只是对一些重要的信息进行下梳理.在开始分析前,先来看下这两张图: MySQL MySQL声称自己是最流行的开源数据库.LAMP中的 ...

  10. MySQL创建函数报“ERROR 1418 ”错误,不能创建函数

    MySQL创建函数报ERROR 1418错误,不能创建函数,根据官方提示是说,不能创建函数可能是一个安全设置方面的配置或功能未开启原因,下面我们一起来看.   错误 ERROR 1418 (HY000 ...