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

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. wcf资料

    WCF服务安全控制之netTcpBinding的用户名密码验证http://www.cnblogs.com/wengyuli/archive/2011/05/14/wcf-nettcpbinding- ...

  2. 深入浅出Node.js (11) - 产品化

    11.1 项目工程化 11.1.1 目录结构 11.1.2 构建工具 11.1.3 编码规范 11.1.4 代码审查 11.2 部署流程 11.2.1 部署环境 11.2.2 部署操作 11.3 性能 ...

  3. once

    var once = function(obj, evtType, handler) { var f = function() { //console.log(arguments) handler.a ...

  4. 【转】Ubuntu14.04搭建安装svnserver

    原文网址:http://www.cnblogs.com/blfshiye/p/5168028.html 前两天,公司准备搭建一个svnserver,供大家使用.于是.就先装了一个Ubuntu系统,然后 ...

  5. HDU 5922 Minimum’s Revenge 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)

    Minimum's Revenge Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  6. iOS开发：使用Tab Bar切换视图

    iOS开发:使用Tab Bar切换视图 上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码改变Root View Controller中的Conten ...

  7. UVa10047 The Monocycle

    UVa10047 The Monocycle 链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=19491 (以上摘自htt ...

  8. ContentProvider初阶Cookbook

    在Android世界里,ContentProvider将数据存储抽象成了类似SQL的形式,通过insert, delete, update, query等接口实现对数据的增删改查.通过ContentP ...

  9. 常见的HTTP状态码深入理解

    状态码的职责是当客户端向服务器端发送请求时,描述返回请求结果.借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了什么错误. RFC2616定义的状态码,由3位数字和原因短信组成. 数字中的第 ...

  10. 洛谷 P1005 矩阵取数游戏

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...