html中心对齐,html – 对齐内联块中心

2024-05-08 11:56:11

中心对齐内联块元素的最简单方法是什么？

理想情况下,我不想为元素设置宽度.这种方式取决于在元素内输入的文本,内联块元素将扩展到新的宽度,而不必改变CSS内的宽度.内联块元素应该彼此重心(不是并排),以及元素内的文本.

请参阅下面的代码或参见jsFiddle.

当前的HTML：

Hello,John Doe.

Welcome and have a wonderful day.

目前的SCSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

body {

margin: 0 auto;

background: rgba(51,51,1);

font-family: 'Open Sans',sans-serif;

}

div {

width: 100%;

height: auto;

margin: 15% 0;

text-align: center;

h2 {

margin: 0 auto;

padding: 10px;

text-align: center;

float: left;

clear: left;

display: inline-block;

&:first-child {

color: black;

background: rgba(255,255,1);

}

&:last-child {

color: white;

background: rgba(117,80,161,1);

}

}

}

在两个元素之间添加一个br并取出浮动：left / clear：left可能是最简单的方法;但是,如果有另一种方式,我很好奇.

html中心对齐,html – 对齐内联块中心相关推荐

html两个盒子怎么左右对其,关于html：在同一行上左右对齐两个内联块
如何对齐两个内联块,以便一个在左边,另一个在同一行? 为什么这么难? 是否有类似LaTeX的 hfill这样的东西可以占用它们之间的空间来实现这一目标? 我不想使用浮点数,因为有了内联块,我可以将基线 ...
css块元素,内联元素,内联块元素
一.块元素,内联元素,内联块元素 1.块元素: 也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li... 支持全部的样式可以设置元素的大小,并且元素是独占一行显示,如果 ...
表格、表格CSS属性及HTML属性、表单元素、type类型、内联块的对齐方式
表格 table thead tbody tfoot table>tr>td(th加粗居中显示) css属性 border-sapcing:数值px; 表格边框设置为细线 borde-co ...
【内联元素居中、内联块元素居中、区块元素居中】06
居中文章目录居中 1. 文字.内联元素.内联块元素在父元素居中 2. 区块元素在父元素中居中 3. 练习 1. 文字.内联元素.内联块元素在父元素居中文字.内联元素居中. 父元素设置:text- ...
css 块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...
CSS中的块元素,内联元素,内联块元素
块元素,内联元素,内联块元素元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素块元素,也可以称为行元素,布局中常用的标签如: ...
玩转CSS中块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 1.块元素块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li. ...
如何删除内联块元素之间的空间？
鉴于此HTML和CSS: span { display:inline-block; width:100px; background-color:palevioletred; } <p> & ...
块元素、行内块和内联元素_如何删除内联块元素之间的空间？
块元素.行内块和内联元素 Introduction: 介绍: This question has become rather popular. How does one remove whitespa ...

最新文章

热门文章