【html css】DIV+CSS如何让图片和文字在同一行

迈不过友情╰ 2022-09-04 05:52 341阅读 0赞

## 【html css】DIV+CSS如何让图片和文字在同一行 ##

前端react项目要写一个图标放在标题后面。

在div+css布局中，如果一行(或一个DIV)内容中有图片和文字的话，图片和文字往往会一个在上一个在下。

目前使用3种方法实现，我用百度图片作为示例。

### 1.添加CSS属性 ###

vertical-align:middle;

<style> a img { border: none; } .testdiv * { vertical-align: middle; } </style>
    
    <div class="testdiv">
      <a href="https://www.baidu.com/"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="这里是图片" /></a>
      <span>这里是文字,看看文字对齐了没</span>
    </div>

### 2.div嵌套 ###

将图片和文字分别套上一个div，就可以利用 margin 熟悉任意定位了

<style> a img { border: none; } .testIMG { float: left; display: inline; margin-top: 0; margin-left: 5px; } .testTXT { float: left; display: inline; margin-top: 20; margin-left: 5px; } </style>
    
    <div class="testdiv">
      <div class="testIMG">
        <a href="https://www.baidu.com/" ><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="这里是图片" /></a>
      </div>
      <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
    </div>

### 3.把图片作为背景 ###

如果你的图片只是用来作为小图标放在文字的左侧，那就推荐用这个方法，图片设置成文字的背景，不循环，定位在左侧上下居中，文字向左padding图片的宽度加几个像素。

<style> a img { border: none } .testTXT { height: 68px; line-height: 60px; padding-left: 220px; background: url(https://www.baidu.com/img/flexible/logo/pc/result.png) no-repeat left center } </style>
    
    <div class="testdiv">
      <div class="testTXT"><span>这里是文字,看看文字对齐了没</span></div>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法在HTML代码中，我们有时候需要在图片后面加上简单的文字进行说明，但默认情况下，图片置顶对齐，文字置底对齐，所以通常图片

浅浅的花香味﹌/ 2023年01月13日 14:52/ 0 赞/ 145 阅读

相关怎么让wtf表单的框和文字在一行_Flask之表单操作

今日分享 Flask之表单操作 Flask系列前三篇： 3)Flask理解Views、models和渲染模板层的调用关系 2)Flask之数据入库操作，完整十步！

我不是女神ヾ/ 2022年10月24日 15:24/ 0 赞/ 123 阅读

相关 html设置在一行内显示,html – 同一行的中心和显示

我正在尝试显示两个< div>元素在同一条线上,但在中心.为了使它们居中,我不得不设置保证金：auto;但是,为了让两个人在同一条线上,我必须做以下任何一种情况： >设置显示

客官°小女子只卖身不卖艺/ 2022年10月07日 15:56/ 0 赞/ 200 阅读

相关【html css】DIV+CSS如何让图片和文字在同一行

【html css】DIV+CSS如何让图片和文字在同一行前端react项目要写一个图标放在标题后面。在div+css布局中，如果一行(或一个DIV)内容中有图片和

迈不过友情╰/ 2022年09月04日 05:52/ 0 赞/ 342 阅读

相关 html向上无间隔滚动文字（图片）

利用JavaScript实现文字滚动效果具体代码如下： <!doctype html> <html> <head> <meta chars

梦里梦外;/ 2022年08月04日 05:22/ 0 赞/ 202 阅读

相关 html图片、背景音乐、滚动文字

html+css网站开发兵书——html部分 3.图像的各个属性相对文字的对齐方式 <img src="图像文件的地址" align="相对文字的对齐方

太过爱你忘了你带给我的痛/ 2022年06月18日 04:24/ 0 赞/ 230 阅读

相关怎么让span与img在同一行

![20171220211858963][] 在img样式加： display:inline-block; <div class="navbar-head

青旅半醒/ 2022年06月03日 06:27/ 0 赞/ 354 阅读

相关让图片和文字在一行中垂直居中对齐的方法

如果一个盒子有2列或者3列排列，有图片，有文字，怎么实现文字始终对齐图片的中间位置呢？方法就是使用vertical-align:middle;也就是给一列都使用这个属性，需

痛定思痛。/ 2022年05月19日 09:08/ 0 赞/ 490 阅读

相关 markdown中让图片和表格显示在一行

原本的markdown表格语法是没有这个功能的,只能通过html代码来实现,在表格和图片外面再套上一个表格，外表格的第一个单元格放内表格，后表格放图片标签。具体html代码如下

朱雀/ 2022年05月15日 14:13/ 0 赞/ 589 阅读

相关 html中文和字母不在同一行

需求要实现发布的公告自动换行，我将内容放入div，中文可以自动换行，长英文字符串不可以换行，这是由于英文字符不加空格默认是一个单词，导致不换行，尝试加<pre>标签也不行。

红太狼/ 2022年05月12日 12:46/ 0 赞/ 220 阅读