设置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. 使用nomad && consul && fabio 创建简单的微服务系统

    具体每个组件的功能就不详细说明了 nomad 一个调度工具,consul 一个服务发现,健康检查多数据中心支持的工具 fabio 一个基于consul的负载均衡&&动态路由工具,对于集 ...

  2. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  3. 判断网络类(获取mac) InternetCheck

    using System; using System.Collections.Generic; using System.Net.NetworkInformation; using System.Ru ...

  4. 今日头条、抖音、西瓜、火山、微视、陌陌等自媒体平台小视频批量下载工具v1.1.0(视频搬运福利)

    前言 目前各大自媒体平台爆火,网络流量暴涨,各大自媒体平台的小视频为广大个广告主带来了如泉涌般的的视频流量,更给广大的自媒体小编带来了丰厚的利益回报,想要创做更多的自媒体内容着实不易,下面给广大的小视 ...

  5. 黄聪:国内com域名转移到Godaddy详细教程(转)

    原文:http://www.cnblogs.com/hsapphire/archive/2010/01/16/1649743.html 最近CCTV进行大量报道色情新闻,还举报CNNIC监管CN域名不 ...

  6. (转)js弹窗&返回值(window.open方式)

    本文转载自:http://hi.baidu.com/z57354658/item/5d5e26b8e9f42fa7ebba93d4 js弹窗&返回值(window.open方式) test.h ...

  7. [转]JAVA 反射及使用

    <%@page contentType="text/html; charset=GBK"%> <%@page import="java.security ...

  8. LoadXml载入Xhtml文件速度很慢

    如果有如下的Xhtml文字,在.Net中用XmlDocument.LoadXml载入的时候,速度很慢.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  9. canvas设置渐变

    canvas设置渐变 方法 createLinearGradient(x1, y1, x2, y2) 线性渐变 createRadialGradient(x1, y1, r1, x2, y2, r2) ...

  10. Request模块(八)

    Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...