设置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. 自动化工具 Python 调 Jmeter 执行参数化 jmx 脚本

    烦透了jmeter输入如下鬼命令: Jmeter -n -t {tmpjmxfile} -l {csvfilename} -e -o {htmlreportpath} 尤其是{htmlreportpa ...

  2. bootstrap class sr-only 什么意思?

    bootstrap class sr-only 什么意思? 在看 bootstrap 内联表单时,label 有一个 class 是 sr-only. sr-only 是给屏幕阅读器用的,是给视力不方 ...

  3. bzoj 3730 震波——动态点分治+树状数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3730 查询一个点可以转化为查询点分树上自己到根的路径上每个点对应范围答案.可用树状数组 f ...

  4. oracle 表空间总结

                           表空间总结  一.认识表空间 1:表空间概念: 表空间是数据库中最大的逻辑单位,Oracle数据库采用表空间将相关的逻辑组件组合在一起,一个Oracle数 ...

  5. myeclipse修改内存大小不足

    工具中修改设置Default VM Arguments   1 打开MyEclipse,如下图所示 2 打开Windows-> Preferences 3 然后选择右侧菜单的Java->I ...

  6. Qt添加库文件和头文件目录(QCreator)

    在使用QtCreator开发图像处理程序的时候想加入Opencv库来处理图形,添加头文件,需要编辑工程文件夹下的.pro文件在文件中添加以下内容,即可包含头文件的文件夹: INCLUDEPATH += ...

  7. Log4j(1)--hellloworld

    创建项目: 使用的是log4j-1.2.17.jar: log4j.properties: log4j.rootLogger=DEBUG, Console ,File #Console log4j.a ...

  8. Chrome经常新标签页打开http://destyy.com/qNHR3u

    经常新标签页打开http://destyy.com/qNHR3u网址. 在历史记录里查询 chrome://history/?q=destyy.com ,发现最早访问是25日10点34分05.貌似那个 ...

  9. 设置putty标题栏显示固定信息

    设置好后,登录服务器后,发现标题栏又显示root@sit:/opt/ihome,没有显示成我设置的title内容.原因是: 在Terminal->Features中一定要勾选Disable re ...

  10. UE4关于Oculus Rift (VR)开发忠告

    转自:http://blog.csdn.net/cartzhang/article/details/42493843 UE4虚拟现实 实现的注意事项 https://docs.unrealengine ...