使用display:inline-block,让标签居中

其实在css样式里面能够实现元素居中的方法有很多，比如使用margin:0 auto;或者 text-align:center；

但是还有一种更简单的办法，效率也很快,举个例子：

<div id="parent"><span id="child">你好</span></div>,我现在想让span标签整体在div里面左右居中，怎么办？

实现办法就是给div加一个样式 style="text-align",给span加一个样式 style="display:inline-block;",即可，把里面span换成

图片img或者其他标签均适用，嘿嘿，其实原理就是display：inline-block把span变成了“文本”。。好了，要睡觉了。。晚安。。各位。。。

时间： 2024-08-04 18:20:15

使用display:inline-block,让标签居中的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

css基础 display:inline 块级标签->行内标签简单示例

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

2016/2/25 1， margin auto 垂直方向测试无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;} 竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit

块级元素和行内元素以及display中block、inline和inline-block的区别

块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念.块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示.而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了.比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列. block元素

display:inline、block、inline-block的区别

block元素的特点是: 元素另起一行: 行宽高边距可控制: <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. <span>, <a>, <label>, <input>, <img>, <strong&

display的block、none、inline属性及解释

常会用到display对应值有block.none.inline这三个值参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值.用该值将从对象中删除行.如果其前后都是inline的则在同一行 display:block: 特点: 1.总是在新行上开始 2.该对象随后的内容自动换行 3.高度,行高以及顶和底边距都可控制 4.如果宽度缺

display:inline、block、inline-block区别

块状元素在html中 div.p.h1.form.ul和 li就是块级元素.设置display:block就是将元素显示为块级元素. 块状元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(真霸道,一个块级元素独占一行) 2.元素的高度.宽度.行高以及顶和底边距都可设置. 3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度. 内联元素在html中,span.a.label. strong 和em就是典型的内联元素(行内元素)(

display:inline、block、inline-block的区别以及display其它的属性

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. nline和block可以控制一个元素的行宽高等特性,需要切换的情况如下: 让一个inline元素从新行开始: 让块元素和其他元素保持在一行上: 控制inline

display:inline 跟 display:block 跟 display:inline-block区别

我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a> <a