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

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. 实现对properties文件的有序读写

    最近遇到一项需求,要求把properties文件中的内容读取出来供用户修改,修改完后需要再重新保存到properties文件中.很简单的需求吧,可问题是Properties是继承自HashTable的 ...

  2. Android+clipse导入工程提示:invalid project description

    今天遇到一个奇怪的问题.一个android的工程用eclipse导入的时候,提示错误.错误为:invalid project description . details为xxxx project ov ...

  3. Response.ContentType 详细列表 <转>

    Response.ContentType 详细列表   不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 text/html 也就是网页格式.代码如: <% ...

  4. Unity Kajiya Hair Shader Mod by Normals

    Shader "HairShader" { Properties { _MainTex ("Diffuse (RGB) Alpha (A)", 2D) = &q ...

  5. Linux下用户及用户组的管理

    一.用户账号管理 1. 添加新用户账号 命令格式: useradd 选项 用户名 选项含义如下: -c comment 指定一段注释性描述. -d 目录 指定用户主目录,如果此目录不存在,则同时使用- ...

  6. NGUI-学习笔记（2）一个项目需求

    using UnityEngine; using System.Collections; public class ins1 : MonoBehaviour { //bool isTarget = f ...

  7. asp 数组

    定义简单数组 有两种方法在asp中定义和初始化数组,让我们看看每种的例子: 方法一:MyArray = Array("Jan","Feb","Mar& ...

  8. 5 kafka整合storm

    本博文的主要内容有 .kafka整合storm   .storm-kafka工程  .storm + kafka的具体应用场景有哪些? 要想kafka整合storm,则必须要把这个storm-kafk ...

  9. SPOJ 375 (树链剖分+线段树)

    题意:一棵包含N 个结点的树,每条边都有一个权值,要求模拟两种操作:(1)改变某条边的权值,(2)询问U,V 之间的路径中权值最大的边. 思路:最近比赛总是看到有树链剖分的题目,就看了论文,做了这题, ...

  10. java 解析xml文件案例

    package xmlTest; import javax.xml.parsers.*; import org.w3c.dom.*; public class GetXml { public stat ...