CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位。那么子盒子如何居中显示:
1、距离左偏离50%
2、margin-right子盒子宽度的一半
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1 {
height: 200px;
background-color: aliceblue;
position: relative;
} .box2 {
width: 900px;
height: 40px;
background-color: red;
position: absolute;
bottom:0px;
left: 50%;
margin-left: -450px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果:
CSS——盒子居中显示的更多相关文章
- CSS文本居中显示
因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...
- css盒子居中
方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta char ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- css盒子居中定位问题
在HTML中,div盒子的居中要通过外边距margin和width来控制,首先确定盒子的宽度,然后确定盒子方位并将其平移便可使盒子移到固定位置. <div id="divpic&quo ...
- CSS盒子居中的常用的几种方法
第一种: 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; bo ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- CSS盒子模型中()是透明的,这部分可以显示背景()
CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: · Margin(外边距) - 清除边框外的区域,外边距是透明 ...
随机推荐
- 【HDOJ3068】最长回文(manacher)
题意:求一个由小写字母组成的字符串中的最长回文长度 cas<=120 n<=110000 思路:试manacher板子 ..]of char; p:..]of longint; ch:an ...
- java连接数据库(经常用)
一.配置环境 1.首先下载sqlserver2008驱动文件,找到sqljdbc4.jar文件,将这个文件拷到C:\Program Files\Java\jdk1.8.0_121\jre\lib\ex ...
- linux命令与技巧
1.模糊查询:find / -name '*Eclipse*'2.获得管理员权限:sudo -i
- AbstractList 重写 equals() 方法
题目内容 题目内容很简单,就是创建 ArrayList 和 Vector 集合,向两者添加相同内容的字符串,最后用 equals() 方法比较是否相等. 这里就考察了 "==" 和 ...
- Ubuntu安装deb时错误:“dpkg:错误:另外一个进程已经为 dpkg 状态数据库 加锁”解决
以下方式任选一个即可: 1.重启系统 2.执行(这种方式不要尝试,系统很容易挂) sudo rm /var/lib/dpkg/lock 然后执行修复 sudo dpkg --configure -a
- [A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转换为 [B]System.Web.WebPages.Razor.Configuration.HostSection。
记录下mvc4升级到mvc5后,运行项目提示: “/”应用程序中的服务器错误. [A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转 ...
- JavaScript实现页面无刷新让时间走动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- POJ 2485 Highways 最小生成树 (Kruskal)
Description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has no public h ...
- IFFT 的实现
IFFT 的实现 前些天给出了FFT的实现,如今给出IFFT(inverse FFT)的实现 基于IFFT 算法.对FFT的核心程序稍作改动就可以 : ) %%******************** ...
- luogu2744 量取牛奶
题目大意 给出一个整数集合$A$,总数$N$,规定一个整数序列$\{a_n\}, \forall i, a_i\in A$满足条件:存在一个正整数序列$\{k_n\}$,使得$\sum_{i=1}^n ...