【CSS】css各种居中方法
水平居中的text-align:center 和 margin:0 auto
这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响,否则一切都是无用功。margin:0 auto
也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。
垂直居中的line-height
什么?!margin在垂直居中里不起作用了?显然事情确实如此,我们仅有margin:0 auto的用法而没有auto 0的情况。至于line-height,他也是作用在父元素上,当他的值等于父元素的height值时
,内部的文字就会自动的垂直居中了。此处好像仅仅只能是文字而已,遗憾。
万能的position大法
这个方法可以说真的是万能的。当你为一个元素无法居中而困扰的时候,可以果断的使用他,而且几乎没有后遗症,绝对是前端工程师们居家旅行必备的手段之一。
具体的做法很简单,首先给父元素写上positon:relative,这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去,写上子元素的height和width,这个似乎是必须的
,某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心,给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;
margin- left:一半的weight值的负数。整理一下之后,可能你会给你的子元素写上这样的css(当然,父元素也要先写上width和height)
{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}
接下去就刷新页面吧,你的子元素已经是居中显示了。
使用这个方法的好处在于无论你是什么形式的内容都可以马上居中,而缺点就是必须对元素有确定的宽高值,否则的话可能就需要通过javascript来进行一些小计算了。
【CSS】css各种居中方法的更多相关文章
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
- CSS居中方法搜集
转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...
- CSS居中方法
css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- CSS中元素各种居中方法(思维导图)
前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css实现垂直居中的方法整理
1.表格布局法.(利用表格的显示模式)需要用到一些冗余的 HTML 元素,因此这里不多介绍. 2.行内块法.也不作讨论,因为在我看来这种方法 hack 的味道很浓. 如果你有兴趣,可以去看看 Chri ...
随机推荐
- 腾讯QQ企业邮箱在ruby on rails 框架中的mailer配置
在编写ruby on rails程序时,我们可能会需要用到发送邮件的程序,如果使用gmail进行smtp发送一般问题不大,但很多企业使用的是腾讯QQ企业邮箱.使用该邮箱进行链接时出现各种错误,goog ...
- G家二面
题目都很基本,都属于听说过但是不会做的…都是操作系统,compiler的概念题… 概念题郁闷就郁闷在不会就是不会,就算能扯两句也会被问倒… 算法就一个,pow(x, y),5分钟不到…… 不是听说G家 ...
- POJ2104 K-th Number Range Tree
又是区间第k大,这次选择这道题是为以后写线段树套平衡树铺路的.Range Tree可以理解成线段树套vector吧,相当于每个结点多存了对应区间的一个排好序的序列.画一下就会知道空间的消耗是nlogn ...
- ZOJ 3778 Talented Chef(找规律,模拟计算,11届ACM省赛,简单)
题目链接 2014年浙江省赛C题,当时觉得难,现在想想这题真水.. 找规律: 若 最大的那个步骤数*m-总和>=0,那么答案就是 最大的那个步骤数 . 否则 就要另加上不够的数量,具体看代 ...
- IE浏览器 下面的文本框,获得焦点后无法输入内容
今天遇到一个问题,在IE浏览器下面,我点击 按钮 弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...
- Debug过程中的mock (及display窗口的使用)
转载:http://m.blog.csdn.net/blog/u012516903/18004965 在debug的时候,有3个地方可以进行mock测试 测试代码如下: 1.使用display窗口 W ...
- Hibernate逍遥游记-第4章映射对象标识符-increment、identity、hilo、native、assigned、sequence、<meta>
1. package mypack; import java.lang.reflect.Constructor; import org.hibernate.*; import org.hibernat ...
- HTTP会话原理解释与应用
一.什么是会话 首先解释一下什么是会话.在计算机术语中,会话是指一个终端用户与交互系统进行通讯的过程,比如从输入账户密码进入操作系统到退出操作系统就是一个会话过程.会话较多用于网络上,TCP的三次握手 ...
- Unity获取方法的参数和方法名称
public IMethodReturn Invoke(IMethodInvocation input, GetNextHandlerDelegate getNext) { Console.Write ...
- VS2005控制台程序修改nb0文件
VS2005控制台程序修改nb0文件 我们要实现的功能就是通过CMD传递进来的值来在nb0文件末尾增加版本信息,新建控制台程序,自动生成的main函数如下,默认的代码非常简单: int _tmain( ...