intouch负值显示0_17、定位的盒子居中显示

盒子居中显示

margin: 0 auto; 只能让标准流的盒子居中对齐，脱标的盒子无法居中；

定位的盒子居中：先向右走父级盒子的一半50%，然后再向左走子盒子的一半(margin-left:负值)；

body {

margin: 0;

padding: 0;

}

.box {

height: 500px;

background-color: #aaa;

position: relative;

}

.nav {

width: 960px;

height: 60px;

background-color: #666;

position: absolute;

bottom: 0;

/*首先走到父盒子的一半*/

left: 50%;

/*然后使用负数，往回走，走子盒子的一半*/

margin-left: -480px;

}

顺风盒子居中

body,ul {

margin: 0;

padding: 0;

}

.banner {

width: 1259px;

height: 472px;

margin: 0 auto;

position: relative;

}

.search {

width: 960px;

height: 60px;

background-color: #666;

position: absolute;

bottom: 0;

left: 50%;

margin-left: -480px;

}

.search ul li {

list-style: none;

}

.search ul li {

float: left;

}

.search ul li a {

display: inline-block;

width: 160px;

height: 60px;

line-height: 60px;

text-align: center;

color: #fff;

text-decoration: none;

}

.search ul li a:hover {

background-color: #fff;

color: #000;

}

.search ul li a.one:hover {

background-color: #333;

color: #fff;

}

.login {

position: absolute;

left: 149px;

bottom: 56px;

}

.sj {

position: absolute;

left: 223px;

bottom: 48px;

z-index: 1;

}

运单查询
运费查询
时效查询
收送查询
客户查询
客户查询

注意

标签包含规范：

div可以包含所有标签；

p标签不能包含div、h1等标签；

h1可以包含p，div等标签；

行内元素尽量包含行内元素，行内元素不要包含块元素；

规避脱标流

尽量使用标准流。

标准流解决不了的使用浮动。

浮动解决不了的使用定位。

margin-left: auto:意思就是左边自动往右边冲，直至冲不动了，所以使用该样式的会在父盒子的最右边；

body,ul {

margin: 0;

padding: 0;

}

.box {

width: 200px;

height: 200px;

background-color: red;

margin: 0 auto;

}

.nav {

width: 50px;

height: 30px;

background-color: aliceblue;

margin-left: auto;

}

intouch负值显示0_17、定位的盒子居中显示相关推荐

python PyQt5中文教程☞【第二节】PyQt5基本功能（创建窗口、应用程序图标、显示提示语、通过按钮关闭窗口、消息框（关闭窗口确认框）、窗口显示在屏幕中间【居中显示】）
引用文章:http://code.py40.com/pyqt5/ 文章目录简单的例子:创建一个小窗口应用程序的图标显示提示语通过按钮关闭窗口消息框(关闭窗口确认框) 窗口显示在屏幕的中间[居 ...
初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...
IMG图片和文字同一行显示，图片和文字居中显示
问题其实很好解决,只要设定img标签的vertical-align CSS属性就好了,代码如下:
如何让div盒子或文字居中显示
学习目标: 让div盒子居中显示的方法和让文字居中显示的方法学习内容: 提示:这里可以添加要学的内容例如: 1. 让div盒子水平垂直居中的方式 2. 让文字水平垂直居中的方式 div居中: 通过 ...
手机端扣扣浏览器图片居中_实现图片始终居中显示于浏览器窗口中心位置
盒模型在敲代码之前,首先建立一个盒模型,这让写代码的时候变得思路清晰. 本案例中,所要实现的是图片居中显示,超出浏览器窗口部分的图片隐藏.因此,盒模型如图: 图片以浏览器窗口作为定位元素,居中显示. ...
【java基础知识】设置表格内容居中显示，表格字体大小调整，表格列宽调整
一.表格内容居中显示通过Netbeans创建表格后,默认表头和表格内容全部偏左显示,想要手动修改,需要先将自动创建的表格类改为public类型. 然后在表格代码部分后面添加下面代码: 1.表头居中显 ...
H5 div 居中显示
H5 div 居中显示文章目录 H5 div 居中显示推荐:[浏览器同步测试工具](http://www.browsersync.cn/#install) H5 引入外部CSS文件 div居中显示 ...
css样式大全（总结、心得、css3新特性、盒子居中模型等）
css.html.js是前端的三剑客学习好css,这能让前端页面'妆扮'成更加美丽! 行内元素(display:inline) span a bi em label input select te ...

intouch负值显示0_17、定位的盒子居中显示

intouch负值显示0_17、定位的盒子居中显示相关推荐

最新文章

热门文章