刚刚度过了实习期,进入了试用期。试用期依然会安排学习的任务。在学习中发现css的居中十分常用,做一个小小的探索。

一、水平居中

1.行内元素

可以直接使用text-align:center来解决。例如图片和文字等。

2.块级元素

2.1宽度确定的块级元素,使用margin-left:auto;和margin-right:auto;

2.2宽度不确定的块级元素:

a.用table包裹,再对table使用text-align:center。

b.将元素设置为display:inline,然后在使用textalign:center.

c.将父元素设置float:left;position:relative;left:50%;

将子元素设置float:left;position:relative;left:-50%;

二、竖直居中

1.父元素高度不确定的文本、图片、块级元素:设置相等的上下边距。

2.父元素高度确定的单行文本:line-height设置为父元素的高度。

3.父元素高度确定的多行文本、图片、块级元素:

a.用table嵌套,使用vertical-align:middle;

b.设置display:table-cell;vertical-align:middle;

CSS居中初探的更多相关文章

  1. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  3. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  4. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  5. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  6. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  7. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  8. 各种div+css居中方式调整(转载)

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  9. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

随机推荐

  1. Jmeter调试工具---HTTP Mirror Server

    之前我介绍过Jmeter的一种调试工具Debug Sampler,它可以输出Jmeter的变量.属性甚至是系统属性而不用发送真实的请求到服务器.既然这样,那么HTTP Mirror Server又是做 ...

  2. 修改nginx服务器类型

    通常nginx服务器不隐藏服务器类型及版本信息  curl -I http://www.aaa.com    获取web服务器的类型和版本代码   HTTP/1.1 200 OK   Server: ...

  3. gem install 出现Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://api.rubygems.org

    在安装了rvm来管理多版本的ruby之后,想在不同环境下安装一些gems,结果gem install puma 之后,发现一次又一次失败. gem install 出现Errno::ECONNRESE ...

  4. IOS开发 应用程序图标数字角标

    其实实现这个功能很简单,只要调用UIApplication即可.   用法用例:[UIApplication sharedApplication].applicationIconBadgeNumber ...

  5. 分享一个漂亮的ASP.NET MVC黑色界面框架

    插件应用架构概述 基于LCLFramework插件框架的应用由以下三个部分构成: (1)主程序:针对特定应用环境(Web.WinForm等应用环境),加载启动插件,获取插件入口,运行入口程序. (2) ...

  6. 【转帖】自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势

    自助式BI的崛起:三张图看清商业智能和大数据分析市场趋势 大数据时代,商业智能和数据分析软件市场正在经历一场巨变,那些强调易用性的,人人都能使用的分析软件正在取代传统复杂的商业智能和分析软件成为市场的 ...

  7. jarsigner 签名android apk

    1.查看签名: jarsigner -verify app_signed.apk 查看是否签名,如果已经签名会打印 "jar verified". jarsigner -verif ...

  8. Strategy策略设计模式

    1.策略模式和状态模式的区别和联系(本部分转载自:http://letscoding.cn/java%E4%B8%AD%EF%BC%8C%E7%8A%B6%E6%80%81%E6%A8%A1%E5%B ...

  9. Swift 3 新特性

    原文:What's New in Swift 3? ,作者:Ben Morrow,译者:kmyhy Swift 3将于今年下半年推出,为Swift开发者们带来了很多核心代码的改变.如果你没有关注过 S ...

  10. MySQL数据库从GBK转换到UTF-8最简单解决方案(也适用于其它编码转换)

    1.使用mysqldump导出表结构,如: mysqldump -d -u root -p 数据库名 >/root/struct.sql 2.使用mysqldump以特定编码导出数据(其中utf ...