对于一个不确定宽度的元素居中，我们想到使用的方法是

text-align:center;

或者

margin:0 auto;

text-align只对行内元素有效，对于块元素我们要用margin，块元素还需要给定一个宽度才能居中，否则不会有效果。

问题来了：当我有一个不定宽度的块元素如何居中呢？

答案是先把块元素添加一个属性

display:inline-block;

再从父元素添加text-align:cenger;居中。

css 不确定元素宽度的水平居中的更多相关文章

  1. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

  2. 转：CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  3. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  4. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  5. CSS布局：元素水平居中

    CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...

  6. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  7. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  8. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  9. css 选择器、元素默认宽度、media screen

    @media screen and (min-width:800px){ .a{  background: url('../image/banner/banner1.jpg') no-repeat l ...

随机推荐

  1. NOT EXISTS优化

    INSERT INTO F_PTY_INDIV (PTY_ID, PTY_NAME, GENDER_CD, BIRTHDAY, CERT_TYPE, CERT_NO, SOCINSUR_NO, COU ...

  2. GPL,LGPL和BSD等协议注意事项

    使用开源软件必须注意GPL,LGPL和BSD等协议 简而言之,GPL协议就是一个开放源代码协议,软件的初始开发者使用了GPL协议并公开软件的源程序后,后续使用该软件源程序开发软件者亦应当根据GPL协议 ...

  3. bzoj2165

    类似于bzoj1706,考虑到楼层是等价的我们令f[p,i,j]为用了2^p次电梯,从房间i到j最多上升了多少层然后从2^p很容易推到2^(p+1),类似于floyd的转移即可下面我们要用最小的电梯次 ...

  4. rspec学习02

    元数据 RSpec-core存储元数据哈希每实例和组,其中包含他们的描述,声明的位置等等,这个hash控制很多RSpec核心的功能,包括输出格式化程序(访问描述和位置),和before,after钩子 ...

  5. CImg 读取jpg, png ,tif 等格式失败解决方案

    CImg homepage :http://cimg.sourceforge.net CImg 给出的一个简单的示例:http://cimg.sourceforge.net/reference/gro ...

  6. JavaScript高级程序设计21.pdf

    第10章 DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口) IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的对象与原生JavaScript对象 ...

  7. Tomcat绑定多个IP地址 多域名绑定

    http://blog.csdn.net/stevenyanzhi/article/details/6029776 Tomcat绑定多个IP地址 如果一台服务机上有多个IP地址又有多个工程如何一个IP ...

  8. javascript的几个问题

    基础 1. 可选的分号 只有在缺少了分号就无法正确解析代码的时候,javascript,才会在一行的最后自动添加; a = 3 //自动填充 b = 4; var a a = 3 console.lo ...

  9. postgresql的/d命令

    ostgreSQL-psql常用命令 文章索引 [隐藏] \d命令 \d命令   1 2 3 格式: \d [ pattern ] \d [ pattern ] + 该命令将显示每个匹配关系(表,视图 ...

  10. 【OpenCV入门教程之一】 安装OpenCV：OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置

    本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://blog.csdn.net/poem_qianmo/article/details/19809337 作者:毛星云(浅墨 ...