首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用css将两个div并排对齐,div包含点图标和文本

要使用CSS将两个div并排对齐,每个div包含一个点图标和文本,可以使用以下步骤:

  1. 创建HTML结构,在<body>标签内添加两个<div>元素,分别表示两个要对齐的div。
代码语言:txt
复制
<div class="container">
  <div class="box">
    <span class="icon"></span>
    <span class="text">文本1</span>
  </div>
  <div class="box">
    <span class="icon"></span>
    <span class="text">文本2</span>
  </div>
</div>
  1. 使用CSS对<div>元素进行样式设置,实现并排对齐。
代码语言:txt
复制
.container {
  display: flex; /* 使用flex布局 */
}

.box {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.icon {
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  background: url(图标地址) center center no-repeat; /* 设置图标背景 */
  background-size: contain; /* 图标居中显示并保持比例 */
}

.text {
  margin-left: 5px; /* 文本与图标之间的间距 */
}

其中,你可以将"图标地址"替换为实际图标的URL。

通过以上CSS样式设置,两个<div>元素将会并排显示,每个<div>元素内部包含一个点图标和相应的文本,并且图标和文本之间有一定的间距。

需要注意的是,以上示例是使用了flex布局实现对齐,如果要兼容较旧的浏览器,可以考虑使用其他方式,如浮动或定位等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS专题,熟练布局技巧,需知文档流

高矮不齐,底边对齐 网页上的两个不同的内容出现高低不同时,底边对齐。如图: 3. 自动换行 块级元素行内元素 在HTML中,我们已经标签分为了:文本级、容器级。...CSS标准文档流也标签分为两种等级: 1)块级元素 霸占一行,不能与其他任何元素并列; 能接受宽、高; 如果不设置宽度,那么宽度默认变为父亲的100%。...CSS的分类HTML分类很像,就p不一样:所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素;所有的容器级标签都是块级元素。 总结如下图: 块级元素行内元素的互换 1....此时它一个span无异, 此时这个div:不能设置宽度、高度;可以别人并排了。 2. 行内元素可以设置成块级元素 语法为:display:block; “block”是“块”的意思。...此时这个标签,一个div无异,此时这个span:能够设置宽度、高度;必须霸占一行了,别人无法和他并排;如果不设置宽度,撑满父亲。

77330

vertical-align刨根问底

经常需要让一些并排显示的元素竖直对齐 CSS提供了一些可选方案,有时通过float来解决,有时用position: absolute,有时甚至用手动添加margin或padding这样的脏方法,我不很喜欢这些方案...那么,元素对齐到底是怎么回事? baselineouter edge 竖直对齐最重要的参照是相关元素的baseline,某些情况下,元素包裹盒的顶边底边也很重要。...如果这个字符没有以任何方式对齐,它默认坐在baseline上 在baseline周围,行盒含有我们称之为文本盒(text box)的东西。文本盒可以简单地看做一个没有任何对齐方式的行盒中的内联元素。...它具有baseline,文本盒及顶边底边 内联级元素,是哪些被对齐的东西,它们具有baseline顶边底边 vertical-align的值 通过使用vertical-align来对上面提到的参照内联级元素设定某些关联...结果是文本紧挨着的小图标漂亮地居中了 行盒baseline的移动 这是个用vertical-align的常见陷阱:行盒的baseline受该行所有元素的影响。

1.2K50
  • 这15个HTMLCSS错误我不信你没犯过(网站规范)

    例如,他们使用 img 元素标记社交图标。 但是社交图标是一个装饰图标,它可以帮助用户更快地理解元素的含义,而无需阅读文本。如果我们删除图标,我们不会失去元素的含义,因此我们可以使用背景图像属性。...但很少有人知道这些属性会导致数据丢失,尤其是在垂直对齐时。 这是因为这些属性的工作原理。此过程包括两个术语。第一,对齐容器是您声明对齐属性的一个元素。 第二,对齐主体是对齐容器内的元素。...对齐属性会影响它们。 因此,当对齐主体的尺寸大于对齐容器的大小时,就会出现这种情况。在默认的对齐模式下,它会导致数据溢出丢失。因此,用户看到裁剪的元素。...起初,文本很短。但是,当我们使它更多,我们失去了标题关闭按钮。 我们可以使用自动边距修复它,因为它使用额外的空间来对齐元素,不会导致溢出。看看元素是如何不再丢失的。...如果你不这样做,你依靠你设置的宽度高度属性在CSS你的界面将被打破。 您的CSS可能未加载,此时,图标尝试填充所有可用空间。所以错误发生了。只需设置宽度高度属性,即可轻松入睡。

    3.3K31

    BootStrap应用开发学习入门

    /**列表**/ .list-unstyled: 移除默认的列表样式,列表项中左对齐 ( 中) .list-inline: 所有列表项放置同一行 .dl-horizontal...例如要创建三个相等的列,则使用三个 .col-xs-4 满足 1行十二列; 网页媒体查询是非常别致的”有条件的 CSS 规则”,常常用做于网页自适应; 媒体查询有两个部分,先是一个设备规范,然后是一个大小规则...使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀后缀的文本或按钮。....text-danger #"#text-danger" 类的文本样式 .text-hide #页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗...,在元素获取焦点时显示(如:键盘操作的用户) .close #显示关闭按(使用通用的关闭图标来关闭模态框警告框) .caret #显示下拉式功能(下拉菜单) 基础示例: <div class

    17.5K20

    BootStrap应用开发学习入门

    /**列表**/ .list-unstyled: 移除默认的列表样式,列表项中左对齐 ( 中) .list-inline: 所有列表项放置同一行 .dl-horizontal...例如要创建三个相等的列,则使用三个 .col-xs-4 满足 1行十二列; 网页媒体查询是非常别致的”有条件的 CSS 规则”,常常用做于网页自适应; 媒体查询有两个部分,先是一个设备规范,然后是一个大小规则...使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀后缀的文本或按钮。....text-danger #"#text-danger" 类的文本样式 .text-hide #页面元素所包含文本内容替换为背景图(文本隐藏) #背景颜色,文本是个链接鼠标移动到文本上会变暗...,在元素获取焦点时显示(如:键盘操作的用户) .close #显示关闭按(使用通用的关闭图标来关闭模态框警告框) .caret #显示下拉式功能(下拉菜单) 基础示例: <div class

    14.6K30

    css笔记

    网页中常用的字体有宋体、微软雅黑、黑体等,例如网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码: p{ font-family:"微软雅黑";} 可以同时指定多个字体,中间以逗号隔开...使用了类选择器、属性选择器、伪元素伪类选择器的规则。 使用了元素选择器的规则。 只包含一个通用选择器的规则。 同一类选择器则遵循就近原则。...纵坐标默认为50%。第二个值将用于纵坐标。 注意: position 后面是x坐标y坐标。 可以使用方位名词或者 精确单位。 如果精确单位方位名字混合使用,则必须是x坐标在前,y坐标后面。...推荐网站: http://www.iconfont.cn/ 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标阿里妈妈图标库...学习目标: 掌握京东中间部分制作 理解BFC使用 了解优雅降级渐进增强 了解CSS压缩验证工具 typora-copy-images-to: media---- 京东项目(二) nav导航栏所用知识

    7.7K50

    Jump Start Bootstrap 第3章

    我们现在一组元素放在每个列表项中来代替单纯的文本。...接下来,我们创建另一个div,它将之前的是同一级的。我们将给这个元素提供两个类:“collapse””navbar-collapse”。...使用符号代替小图像有很多优点,包括: 为小图像或精灵保存多个请求; 由于它们是字体图标,它们的颜色大小可以在使用CSS属性的过程中变化; 在所有的展示中,他们看起来都很干脆利落。...一个例子是在顶部导航栏中包含一个登录表单,用户名密码并排。...为了复选框和它旁边的文本的正确对齐,您应该将它们都封装在一个用于复选框的div中;在这种情况下,您还应该输入元素放入标签元素中,这样就可以正确地映射到相应的输入元素。

    13.9K20

    CSS3】css开篇基础(5)

    如果你喜欢这篇文章,请别吝啬你的赞❤️❤️收藏。如果你对我的内容感兴趣,记得关注我以便不错过每一篇精彩。 当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正️️。...2.精灵图Sprites 为了有效地减少服务器接收发送请求的次数,提高页面的加载速度,出现了CSS精灵技术 核心原理:网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了...1.精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中 2.该大图当背景后是以左上角对齐的,所以要让其他小背景图片插入进去就要移动大背景图 3.移动大背景图片的位置,此时可以使用...5.使用精灵图的时候需要精确测量,每个小背景图片的大小位置,根据位置然后移动相应距离。...: 使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐

    8210

    CSS 样式补充之 font & background

    -- 图标字体(iconfont) - 在网页中经常需要使用一些图标,可以通过图片来引入图标 但是图片大小本身比较大,并且非常的不灵活...- 所以在使用图标时,我们还可以图标直接设置为字体, 然后通过font-face的形式来对字体进行引入 - 这样我们就可以通过使用字体的形式来使用图标...csswebfonts移动到项目中 4.all.css引入到网页中 5.使用图标字体 - 直接通过类名来使用图标字体...文本的样式1 7.1 水平对齐 text-align 文本的水平对齐 可选值: baseline 默认值 基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐 7.2 垂直对齐 vertical-align...,这种图我们称为雪碧图 雪碧图的使用步骤: 1.先确定要使用图标 2.测量图标的大小 3.根据测量结果创建一个元素

    2K51

    前端基础篇之CSS世界

    内联元素又叫行内元素,指只占据它对应标签的边框所包含的空间的元素,这些元素如果父元素宽度足够则并排在一行显示的,如span、a、em、i、img、td等。...一个div设为padding: 100%就能得到一个正方形,padding: 10% 50%可以得到一个宽高比 5:1 的矩形。...css中有个概念叫x-height,指的是小写字母 x 的高度。vertical-align: middle对齐的就是基线往上1/2x-height高度的地方,可以理解为近似字母 x 的交叉。...(图中两个div行高一样,div.one 的背景色区域就是行框盒子的高度,而 div.two 的背景区域则是实际高度,其行框盒子高度 div.one 是一样的。) ?...属于同一个BFC的两个相邻Box的margin会发生重叠; 每一个盒子的左外边距应该包含块的左边缘相接触。即使存在浮动也是如此,除非子盒子形成了一个新的BFC。

    2.1K50

    CSS】253- 从原型图到成品:步步深入 CSS 布局

    这要归因于元素的默认样式,这其中就有我们要探讨的第一个 CSS 知识:行内元素块级元素。 行内元素们肩并肩挤在一行里(就像句子中的词一样,必要时会折行)。...一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉,每个富文本编辑器顶部都有这种功能的按钮: ? 它们把文本进行左对齐、居中对齐、右对齐以及 “两端对齐”,也就是铺满整行。...因为 CSS 在竖直方向上有 margin 坍塌现象。当上下两个 margin 短兵相接时,数值大的 margin 会 “吃掉” 小的。详情参见 CSS 技巧:margin 坍塌。...还有一个小窍门:可以用 伪元素在 “handle” 与 “时间” 之间添加一个凸。这个凸符号单纯为了装饰,不具有具体语义,所以用 CSS 实现不会污染 HTML 语义结构。...正因为它是字体,那些可以用于文字的 CSS 属性(例如 color font-size)都适用于图标字体。

    4.4K51

    万字总结 CSS 布局

    CSS的分类HTML的分类很像,除了p不一样: 所有的「文本级标签」都是「行内元素」,除了p;「p是个文本级,但是是个块级元素」; 所有的「容器级标签」都是「块级元素」 当然,块级元素与行内元素是可以相互转换的...此时divspan没有什么区别,此时的div不能设置宽度高度(即使设置了也并不显示出来,不信你去用代码验证一下呀),此时div可以别人并排。...无异;此时的span能够设置高度宽度;并且霸占一行,别人不能与之并排;如果不设置宽度,那么撑满父亲。...由于文档流的限制,极大限制了我们的网页,例如:能并排的不能改宽高等。所有,我们需要脱离标准文档流。 CSS中有三种手段可以使一个元素脱离标准文档流,分别为「浮动」、「绝对定位」「固定定位」。...如果某些区域不需要利用,则使用""(.)表示。

    5.7K20

    关于 vertical-align 你应该知道的一切

    前言 vertical-align,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,垂直对齐,主要目的用于将相邻的文本与元素对齐。...:translateY:属于 CSS3 新特性,对 IE8、IE9 有一些兼容性的问题 使用 vertical-align 你能在不同场景下去进行灵活细微的元素对齐工作,并且它有很好的的兼容性,详情如下图所示...这也意味着,默认情况下,div 、p 等元素设置 vertical-align 无效 值得注意的是:例如 float position: absolute,一旦设置了这两个属性之一,元素的 display...如上图所示,第一个元素基线是子元素”文本“的基线,而第二个是盒子的底边缘,默认基线对齐两个元素基线位置不一致,所有会产生上图现象,知道了原因,我们只需设置元素的 vertical-align 属性为...文本类 “text-top,指的是盒子的顶部父级内容区域的顶部对齐,即与 content-area 顶部对齐

    2.8K20
    领券