设置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. 【idea】如何彻底卸载idea

    卸载MAC中的IDEA Intellij 14 使用命令行: 1 2 3 4 5 6 cd /Applications/ rm -r IntelliJ\ IDEA\ 14.app/ rm -r /Us ...

  2. hdu1066

    求N!的非零末尾位(吉大ACM模板) #include <stdio.h> #include <string.h> #define MAXN 10000 int lastdig ...

  3. C语言Socket编程(计算机网络作业)

    最近我计算机网络课程要做作业了,没办法跟着老师一步一步的写C语言的代码,使用的计算就是Socket通信发送消息:代码实现的功能很简单,客户端向服务器端发送消息,服务器端接收客户端发来的消息,并且输出显 ...

  4. SpringCloud初体验:四、API GateWay 服务网关

    网关服务很多,比如:Zuul.Kong.spring cloud gateway ……, 这里不纠结哪种性能好,本次体验是用的 spring cloud gateway 更多网关比较可以了解这篇文章: ...

  5. SpringCloud初体验:一、Eureka 服务的注册与发现

    Eureka :云端服务发现,一个基于 REST 的服务,用于定位服务,以实现云端中间层服务发现和故障转移. Eureka 可以大致理解为 房产中介 和 房东 的关系,房东想让租客租房子,首先要把房子 ...

  6. java web Servlet开发(一)

    一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...

  7. codeforce1029B B. Creating the Contest(简单dp,简单版单调栈)

    B. Creating the Contest time limit per test 1 second memory limit per test 256 megabytes input stand ...

  8. LLMNR欺骗工具Responder

    LLMNR(Link-Local Multicast Name Resolution,链路本地多播名称解析)协议是一种基于DNS包格式的协议.它可以将主机名解析为IPv4和IPv6的IP地址.这样用户 ...

  9. /proc目录下文件详解

    /proc “文件系统”是一个目录,其中包含的文件层次结构代表了 Linux 内核的当前状态.它允许用户和管理员查看系统的内核视图. /proc 目录中还包含关于系统硬件及任何当前正在运行的程序信息. ...

  10. javascript中数组的强大用法·

    1 归并 var a = [{name: 'tom'},{name: 'aiscy'},{name: 'judy'},{name: 'mike'}];a.reduce(function(prev, i ...