块级元素社设置了text-align:center以后,对其直接行内元素/果冻元素、继承行内元素/果冻元素都会产生“居中效应”。

<style>
.test4{
text-align: center;
}
.test4 ul li{
display: inline-block;
}
</style>
<div class="test4">
<div>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>
<ul style="padding: 0;">
<li>elem1</li>
<li>elem2</li>
</ul>
</div>

结果:所有的span按照居中对test4进行填充;

li元素因为继承了test4的text-align:center属性,所以li内的文本元素也按照居中形式填充li。

因此,可以利用这个特性对块级元素下的行内元素进行居中填充处理。

块级元素的text-align对行内元素和果冻元素(inline-block)的作用的更多相关文章

  1. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  2. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

  3. HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

    HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</titl ...

  4. Html:行级元素和块级元素标签列表

    块级元素 div p h1-h6 form ul ol dl dt dd li table tr td th hr blockquote address table menu pre HTML5: h ...

  5. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  6. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  7. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  8. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

  9. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

  10. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

随机推荐

  1. android 浮动窗体学习笔记及个人理解(仿360手机助手)

    很感谢原文作者 http://blog.csdn.net/guolin_blog/article/details/8689140 经自己理解 程序执行界面例如以下图: 1.程序入口界面 2.小浮动窗体 ...

  2. hdu4737A Bit Fun 线段树

    //给一串序列,问有多少对[i,j]使得 //[i,j]区间的全部数的或的值小于m //能够知道'或'操作的加(a|b)>=max(a,b) //能够枚举区间的右边r,找左边第一个不满足的位置 ...

  3. Java中抽象类和接口的区别?

    深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...

  4. git 团队代码管理交流共同进步

    Installation methods for GitLab | GitLab https://about.gitlab.com/installation/#centos-7 gittutorial ...

  5. hadoop3 无法启动 查找内存消耗原因

    [root@hadoop3 hadoop]# xloStarting namenodes on [hadoop3]上一次登录:三 12月 27 15:07:11 CST 2017pts/24 上had ...

  6. IDEA及时更新js代码

    需要在Tomcat的设置中为: on ‘update‘ action:当用户主动执行更新的时候更新 快捷键:Ctrl + F9 on frame deactication:在编辑窗口失去焦点的时候更新 ...

  7. RK平台LCD调试说明【转】

    本文转载自:http://blog.csdn.net/u014770862/article/details/76274951?locationNum=2&fps=1 RK平台LCD调试说明 原 ...

  8. android 自定义View开发实战(六) 可拖动的GridView

    1前言 由于项目需求,需要把项目的主界面采用GridView显示,并且需要根据模块优先级支持拖动图标(砍死产品狗).为此,自定义了一个支持拖拽图标的GridView.效果如下: 具体效果如上图 2 可 ...

  9. ssh配置无密码登录

    1.在master机器上生成公钥: [root@master ~]# ssh-keygen -t rsa    注:一直按enter键就可以生成了 Generating public/private ...

  10. bzoj1858 [Scoi2010]序列操作——线段树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1858 线段树...调了一个上午...(后面带 // 的都是改出来的) lazy 标记的下放好 ...