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

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. Bluetooth LE(低功耗蓝牙) - 第一部分

    前言 在写这篇文章的时候,谷歌刚刚发布了Android Wear ,摩托罗拉也发布了 Moto 360 智能手表.Android Wear的API还是相当基本的,是很好的文档材料,而且还会不断的更新, ...

  2. C#中的四舍五入算法

    最近在产品开发过程中遇到一个问题,就是在对数值进行截取,例如说保留两位小数时,最终得到的结果跟预期的在某些情况下会产生差异,这个差异的表现就是最后一位与预期的不一致,也就是说在"四舍五入&q ...

  3. 使用LoadRunner对Web Services进行调用--Import Soap

    利用LoadRunner对Web Services进行测试时,通常有三种可供采用的方法: 在LoadRunner的Web Services虚拟用户协议中,[Add Service Call] 在Loa ...

  4. 数据导出到Excel中

    自己修改后的一个数据导出到Excel的方法,粘出来与大家共享. 只需要将             System.Web.HttpContext.Current.Response.Charset =   ...

  5. poj 1704 Georgia and Bob（阶梯博弈）

    Georgia and Bob Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8656   Accepted: 2751 D ...

  6. weblogic 日志介绍

    1.server.log 该日志记录的是服务(包括admin server 和 app server)启动过程中和关闭过程中的日志,还包括部署在服务上面的应用,在运行过程中所产生的日志. server ...

  7. 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  8. Swift基本语法学习笔记

    Swift与OC的不同点 导入框架的方式 OC使用#import \<UIKit/UIKit.h> Swift使用import UIKit 定义标识符的方式 Swift中定义标识符,必须指 ...

  9. ListBoxControl 删除选择的项的方法

    public void RemoveSelectItems<T>(BaseListBoxControl listControl)        {            var list ...

  10. SuperSocket使用demo

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using SuperSocket. ...