行内元素居中

常见行内元素如文本，图片等居中时，通常是给父元素设置text-align:center 来实现。例如

HTML：

<body>

<div>我是文字，我要居中显示</div>

</body>

css:

<style>

div{

text-align:center ;

}

</style>

块元素居中

块元素居中分为不定宽和定宽两种形式，定宽的块元素我们可以通过设置margin值为auto实现居中。例如：

<body>

<div>我是定宽块元素，我要居中显示</div>

</body>

css:

<style>

div{

width：100px;

margin:10px auto;

border: solid 1px #ccc;

}

不定宽块元素则是

1、加入 table 标签，居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

2、设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置。

3、设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的。

css常见水平居中的更多相关文章

  1. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  2. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  3. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

  4. css如何实现水平居中呢？css实现水平居中的方法？

    面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...

  5. IE6的那些css常见bug（汇总）

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  6. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  7. css常见属性

    css常见属性 1.颜色属性 1.1 color属性定义文本的颜色 1.2 color:green 1.3 color:#ff6600 可简写为#f60 1.4 color:rgb(255,255,2 ...

  8. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

  9. CSS基础【2】：CSS常见属性

    CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...

随机推荐

  1. CVPR-2018 那些有趣的新想法

    Taylor Guo @ Shanghai - 2018.10.18 缘起 还有什么比顶级会议更适合寻找有趣新想法的地方吗?我们从CVPR 2018 计算机视觉和模式识别的顶级会议中发现了很多有趣的东 ...

  2. The Activation Function in Deep Learning 浅谈深度学习中的激活函数

    原文地址:http://www.cnblogs.com/rgvb178/p/6055213.html 版权声明:本文为博主原创文章,未经博主允许不得转载. 激活函数的作用 首先,激活函数不是真的要去激 ...

  3. Redhat linux 安装SVN服务器 CollabNetSubversionEdge

    请仔细阅读安装包自带的readme文件! ================================================= 1. 先去官网,找安装包: http://subversi ...

  4. selenium元素定位不到之iframe---基于python

    我们在使用selenium的18中定位方式的时候,有时会遇到定位不上的问题,今天我们就来说说导致定位不上的其中一个原因---iframe 问题描述:通过firebug查询到相应元素的id或name等, ...

  5. Scrum1

    Scrum1 组员 任务分工 贡献 林泽宇 团队分工.撰写博客.修改完善需求规格说明书.整理代码规范 李涵 后端架构设计 尹海川 logo设计修改.数据库数据 郏敏杰 课堂展示.查阅资料.整理关键和难 ...

  6. c# 读取xml文件 编写form

    主要思想:xml保存控件的数据,c#读取出来并加以显示. 难点:1.控件有父容器和子控件的关系:2.控件事件的添加. 1.控件有父容器和子控件的关系: 可以用绝对坐标在xml文件中先读取子控件再读取父 ...

  7. Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  8. NSTimer使用注意事项

    1.scheduled开头和非schedule的开头方法的区别.系统框架提供了几种创建NSTimer的方法,其中以scheduled开头的方法会自动把timer加入当前run loop,到了设定的时间 ...

  9. 一起写一个Android图片轮播控件

    注:本文提到的Android轮播控件Demo地址: Android图片轮播控件 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用 ...

  10. 新建maven工程问题001

    这周一直在研究SpringMVC+Mybatis,有些心得,记录一下. Ⅰ:建maven遇到的问题. 1.1 新建maven时选中[Create a simple project]这样,后面[Pack ...