设置div中的div居中显示
设置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居中显示的更多相关文章
- div中的内容居中
要使div中的内容居中显示,不仅div要设定“text-align:centr" ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.
- div中嵌套div水平垂直居中
div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...
- java中关于窗体居中显示问题
最近在学着用java写qq聊天程序,首先是登录和聊天界面,书上没有给出居中显示,通过上网查找知道有两种方案 先说第一种方法,也是以前用的方法 /获得屏幕大小Dimension screenSize = ...
- div中嵌套div中使用margin-top失效问题
div中嵌套div中使用margin-top失效问题
- css div中内容绝对居中(多行内容)
div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...
- 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
- 小 div在大 div中左右上下居中
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...
- 让div中的table居中
div 标签上写 style="text-align:center" div中的table中写 style="margin:auto;" <table ...
- 让div自适应浏览器窗口居中显示
今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...
随机推荐
- 10055 - Hashmat the Brave Warrior & 各数据类型所占字节数 (C语言)
Problem A Hashmat the brave warrior Input: standard input Output: standard output Hashmat is a brave ...
- Python中定时任务框架APScheduler
前言 大家应该都知道在编程语言中,定时任务是常用的一种调度形式,在Python中也涌现了非常多的调度模块,本文将简要介绍APScheduler的基本使用方法. 一.APScheduler介绍 APSc ...
- Yocto使用小技巧
1. 借助Yocto编译模块 SRC := mytest obj-m := $(SRC).o KDIR := /media/Yocto/build/tmp/work/poky-linux/linux- ...
- zz 跟风小结一下孕期~
http://www.newsmth.net/nForum/#!article/FamilyLife/1754069968 发信人: milkcat (牛奶猫养了一只牛奶猫(*^__^*) 嘻嘻……) ...
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- Mysql8.0 Public Key Retrieval is not allow错误的解决办法
在使用Mysql 8.0时重启后启动项目的事后会报错com.mysql.jdbc.exceptions.jdbc4.MysqlNonTransientConnectionException: Publ ...
- 5月24日上课笔记-js操作DOM
解析properpties配置文件 类加载器 ResourceBundle 一.jquery操作DOM 1.jquery操作css css("",""); cs ...
- 小程序本作用域下怎么调用全局js
本地wxml文件 <view>app版本:{{version}}</view> 本地js文件 var app; Page({data:{ }, onLoad:function( ...
- VueRouter
使用VueRouter的前提: 1, 必须导入vue-router.js文件 2, 要有VueRouter()实例 3, 要把VueRouter实例挂载到Vue实例中 4, 路由的入口 ...
- multipart/form-data boundary 说明
含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协议上传文件 rfc1867协议概述,jsp 应用举例,客户端发送内容构造 1.概述在最初 ...