---恢复内容开始---

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中居中方法小结的更多相关文章

  1. css清除浮动方法小结

    清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...

  2. CSS布局---居中方法

    在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...

  3. CSS中居中的完全指南(中英对照翻译)

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  4. css居中方法小结

    水平居中 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素 当被设置元素为 块状元素 时用 text-align: ...

  5. css中居中的居中方法

    1:给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 2:居中一个浮动元素 确定容器的宽高 宽500 高 300 的层 ...

  6. ****CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  7. 【CSS】css各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  8. css 元素居中方法

    目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...

  9. [转载]CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

随机推荐

  1. JDBC第三篇--【事务、元数据、改造JDBC工具类】

    这是我JDBC的第一篇 http://blog.csdn.net/hon_3y/article/details/53535798 这是我JDBC的第二篇 http://blog.csdn.net/ho ...

  2. GCD之barrier

    1.在并行队列执行任务中,如果想让某一个任务先执行完后再执行其后面的任务,此时可以用dispatch_barrier_async,下图是dispatch_barrier_async函数的处理流程. 2 ...

  3. BZOJ1854_游戏_KEY

    1854: [Scoi2010]游戏 Time Limit: 5 Sec Memory Limit: 162 MB Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备, ...

  4. Jenkins定时任务

    Jenkins配置定时任务 选中Job名称--配置—构建触发器—勾选“Build periodically” 如图中配置所示:该任务每天上午7点定时执行一次. 官方说明翻译 MINUTE HOUR D ...

  5. Angularjs-Forms(表单)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular表单 input, select, textarea控件都是给用户输入数据 ...

  6. sqoop使用的问题

    找不到表 17/05/02 18:15:47 ERROR tool.ImportTool: Imported Failed: There is no column found in the targe ...

  7. Linux入门之常用命令(4)vi编辑器

    vi分为三种模式 一般模式:删除字符.删除整行.复制粘贴等操作 编辑模式:i o a r进入 输入字符  Esc退出 命令行模式::或/ 将光标移动到最末行 搜寻数据 读取或替换 退出vi 显示行号 ...

  8. hdu4578 线段树 三次方,二次方,一次方的值

    Yuanfang is puzzled with the question below: There are n integers, a 1, a 2, -, a n. The initial val ...

  9. Codeforces Round #420 (Div. 2)

    /*************************************************************************************************** ...

  10. php用PHPExcel库生成Excel文档的例子

    <?php require_once '../libs/PHPWord/PHPWord.php'; require_once '../libs/PHPWord/PHPWord/IOFactory ...