css中居中方法小结
---恢复内容开始---
1.文字垂直居中
.header_nav-item{
height:38px;
line-height:38px;
}
即文字所在模块的高度和行高设置成一样的!
2.块元素垂直居中与父元素
.header_wrap{
height:80px;
position:realitive;
}
.header_logo{
height:38px;
position:absolute;
top:50%;
margin-top:-19px
}
即父元素设置成相对定位,子元素设置成绝对定位,且子元素中top为50%,margin-top为-(负)height的一半。是一种比较经典的块元素居中法!
3.块元素(容器)水平居中
.header_warp{
margin: 0 auto;
}
即元素上下为0,左右设置成自动!
总之是很基础的方法,但经常用到,应该熟记!
---恢复内容结束---
css中居中方法小结的更多相关文章
- css清除浮动方法小结
清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...
- CSS布局---居中方法
在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...
- CSS中居中的完全指南(中英对照翻译)
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- css居中方法小结
水平居中 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素 当被设置元素为 块状元素 时用 text-align: ...
- css中居中的居中方法
1:给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 2:居中一个浮动元素 确定容器的宽高 宽500 高 300 的层 ...
- ****CSS各种居中方法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
- 【CSS】css各种居中方法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
- css 元素居中方法
目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...
- [转载]CSS各种居中方法
水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...
随机推荐
- org.springframework.expression.spel.SpelEvaluationException: EL1011E: Method call: Attempted to call method test() on null context object
前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...
- cas-单点登录-应用说明
单独在tomcat中启动cas 1, 我的百度网盘中有 cas 和 tomcat-cas 压缩包 http://pan.baidu.com/s/1bnxVRkF 直接解压缩就可以使用. 2, ...
- MapReduce执行过程
Mapper任务的执行过程: 第一阶段是把输入文件按照一定的标准分片(InputSplit),每个输入片的大小是固定的.默认情况下,输入片(InputSplit)的大小与数据块(Block)的大小是相 ...
- scoke摘要
登录|注册 关闭 永不磨灭的意志 /* ----------------500G的电影拷到了U盘上,U盘的重量会不会增加?----------------------*/ 目录 ...
- SpringBoot文档翻译系列——29.SQL数据源
原创作品,可以转载,但是请标注出处地址: 因为需要使用到这方面内容,所有对这一部分进行了翻译. 29 使用SQL数据源 SpringBoot为SQL数据源提供了广泛支持,从直接使用JdbcTempl ...
- C++移动构造函数以及move语句简单介绍
C++移动构造函数以及move语句简单介绍 首先看一个小例子: #include <iostream> #include <cstring> #include <cstd ...
- ch340是什么芯片
CH340 是一个USB 总线的转接芯片,实现USB 转串口.USB 转IrDA 红外或者USB 转打印口. 在串口方式下,CH340 提供常用的MODEM联络信号,用于为计算机扩展异步串口, ...
- POJ-1273-Drainage Ditches(网络流之最大流)
Every time it rains on Farmer John's fields, a pond forms over Bessie's favorite clover patch. This ...
- JQuery实现banner图滚动
前 言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...
- IE兼容
这个基本知识http://www.cnblogs.com/yoosou/archive/2012/07/27/2612443.html 参考: http://www.cnblogs.com/cocow ...