css怎么将字和图对齐

最新推荐文章于 2024-07-16 17:16:49 发布
最新推荐文章于 2024-07-16 17:16:49 发布
阅读量1.4w 收藏 13
点赞数 4
文章标签： css html javascript
原文链接：https://m.php.cn/article/468036.html
版权

原文地址：css怎么将字和图对齐-css教程-PHP中文网

在 HTML 代码中，有时会需要在文字旁边加上一个图标。

默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。

常见方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片；3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。

1、添加上“vertical-align:middle”属性

我们用“登陆”这个在实际情况做实例，把“登陆”做成图片，“找回密码”设置成文字其html代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div >

        <img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>

    </div>

</body>

</html>

效果图：

2、把图片设置为背景图片

如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，html代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .haokan{

        width: 300px;

        height: 50px;

        line-height: 50px;

        background-color: red;

        background: url(logo.jpg) no-repeat left center;

         

    }

    .haokan a{

            display: block;

            margin-left: 116px;

        }

    </style>

</head>

<body>   

    <div>

        <a href="">找回密码</a>

    </div>

</body>

</html>

效果图：

3、分别把图片和文字放入不同的div中，html代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .divs .imgs{

        display: inline-block;

        vertical-align: middle;

    }

    .divs .infos{

        display: inline-block;

    }

    </style>

</head>

<body>

    <div>

        <div><img src="logo.jpg" alt=""></div>

        <div><a href="">找回密码</a></div>

    </div>

</body>

</html>

效果图：

leveretz
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 使用小技巧
wangkangyang的博客
02-21 8141
css 使用小技巧
CSS解决文字与图片不能水平居中对齐的问题
09-25
在文字旁边加上一个图标，通过css如何解决文字与图片不能水平居中对齐的问题，下面有个示例，大家可以参考下
CSS 图片与文字垂直居中对齐，文字超出需换行，并从图片底部开始排列
最新发布
Kamikorosu的博客
07-16 264
【代码】CSS 图片与文字垂直居中对齐，文字超出需换行，并从图片底部开始排列。
CSS图片和文字的对齐方式
weixin_44590591的博客
01-14 1692
行内元素有效：vertical-align，块级元素无效 // 垂直居中 vertical-align: middle; // 底部 vertical-align: text-bottom; // 顶部 vertical-align: text-top; 块级元素： 如果相对块级元素有用，同时还要需要添加 dispaly: table-cell; ...
css，解决文字与图片对齐的问题
wangchaoqi1985的博客
11-16 166
css，解决文字与图片对齐的问题
css实现图片与文字水平对齐
蓑笠翁
01-10 8070
图片与文字水平对齐是经常遇到的场景，若使用普通inline或者inline-block布局方式，往往需要通过调整边距来实现图片文字水平对齐，下面我们通过flex布局实现下图功能：
CSS图片与文字水平对齐
热门推荐
wayne0902的博客
05-28 1万+
1) 图片没使用float（文字为行内元素）：图片元素需加上vertical-align:middle（此语句对float元素无效），然后通过使用margin-top（不加上先前语句使用此语句会使图片文字一块移动）进一步调整图片位置即可。貌似加不加display:inline-block没区别啊。 ps:若将vertical-align:middle加在文字元素上，改变margin-top文字和
CSS实现同一行的图片和文字垂直居中对齐的方法
09-25
在网页设计中，将同一行中的图片和文字进行垂直居中对齐是一项常见的布局需求。为此，CSS 提供了 vertical-align 属性，它能够实现这一对齐效果。vertical-align 属性主要是用来设置行内元素（inline）或表格单元格...
CSS实现让同一行文字和输入框对齐的方法
09-25
本文将深入探讨CSS中实现文字与输入框在同一行内垂直对齐的技巧，特别是通过`vertical-align`属性的使用方法。 首先，需要了解`vertical-align`属性的基本功能。`vertical-align`属性在CSS中用于设置行内元素...
css控制字间距和对齐方式及其所用属性介绍
09-25
其中，字间距（Letter-Spacing）和对齐方式（Text-Align）是两个重要的概念，它们直接影响着文本的可读性和视觉效果。本文将详细讲解这两个属性以及相关的CSS属性。 **1. 字间距（Letter-Spacing）** `letter-...
css图标与文字对齐的两种实现方法
09-24
在本篇教程中，将介绍两种通过CSS实现图标与文字对齐的方法。 第一种方法是通过设置图片的垂直对齐属性来实现。在HTML中，可以使用`<img>`标签插入图标图片，并使用`<span>`标签来包围文字。接着，在CSS中，为`...
图片与文字水平对齐
07-03
图片与文字对齐
css 图片和文字对齐 —— 垂直居中对齐，任意位置对齐
朝阳39的博客
01-11 1567
实现思路 使用 “子绝父相” 的css定位方法，将图片设置为绝对定位，通过 left 和 top 按需自由调整图片的位置 参考范例 <div style="display:inline-block;position: relative;width:20px"> <img style="position: absolute;top:-15px;left: 4px" src="//img-tmdet..
CSS控制图片和文字在同一行显示且对齐的3种方法
冰霜的博客
09-16 8432
CSS控制图片和文字在同一行显示且对齐的3种方法 weixin_30364325 2017-05-27 12:14:00 263 收藏 版权 当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢 初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css
css：图像与文字（对齐、字间距、行间距、阴影）
sushuyan的博客
02-09 8057
图像与文字对齐方式 第一种：text-align:center； （水平居中对齐） 第二种：vertical-align:text-top/text-bottom/middle；（垂直顶端对齐、底部对齐、居中对齐） 第三种：将图片设置为背景，background: url("images/box8-4.png")no-repeat center right; 字间距 letter-spa...
css样式之图片与文字对齐
m0_56047670的博客
01-02 1507
文字与图片垂直居中对齐
css 让同一行的图片和文字对齐的3种方法
afeie的专栏
06-14 1万+
初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。
css使div盒子中的内容对齐------文本和图片中间对齐
2302_77210478的博客
10-14 1201
前两天在做HTML+CSS设置前端页面时，小席提出一个我之前一直没有关注的问题：在一行文字+一个图片在一行表示的时候，一般在开发中UI设计的时候为了美观和客户的观感都会将文件的中间和图片的中间进行对齐。
css如何让文字与图片水平对齐
06-06
实现文字与图片水平对齐的方法有很多种，以下是一些常见的方式： 1. 使用display: flex;属性 将需要对齐的文字和图片的父元素设置为display: flex;，然后设置align-items: center;即可实现文字与图片的水平对齐。其中align-items: center;用于设置flex元素在交叉轴上的对齐方式，这里的交叉轴是指与主轴垂直的轴。如下所示： ```CSS .parent { display: flex; align-items: center; } img { margin-right: 10px; } ``` 2. 使用vertical-align属性 使用vertical-align属性，将图片的垂直对齐方式设置为middle（或其他与文字一样的垂直对齐方式），即可实现文字与图片的水平对齐。如下所示： ```CSS img { vertical-align: middle; margin-right: 10px; } ``` 3. 设置line-height属性 通过设置line-height属性，让文字和图片都以相同的高度显示，从而实现水平对齐。需要注意的是，这种方式只适用于行内元素。如下所示： ```CSS .parent { line-height: 50px; } img { vertical-align: middle; margin-right: 10px; } ``` 总之，使用以上三种方式中的任意一种，即可实现文字与图片的水平对齐。需要根据实际情况选择最合适的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值