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

初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。

1、在css中给div添加上“vertical-align:middle”属性

我们用“注册、登陆、找回密码”这个在实际运用中经常遇到的情况还做实例，把“注册”和“登陆”做成图片，“找回密码”设置成文字其html代码如下：

使用css的“vertical-align:middle”属性让图片和文字在同一行对齐是一种非常常用的方法，希望大家可以掌握。

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

如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了，html代码如下：

我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。

3、下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行了，html代码如下：

代码如下:

css代码如下：

代码如下:

在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。

学习Java的同学注意了！！！
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流，裙号码：253772578【长按复制】我们一起学Java！

JavaScript中，您可以使用HTML5的<input type="file">元素来实现图片上传功能。

以下是一个简单的示例代码，演示如何在JavaScript中上传图片：

HTML部分：

<input type="file" id="uploadInput">
<button onclick="uploadImage()">上传图片</button>

JavaScript部分：

function uploadImage() {
  var fileInput = document.getElementById('uploadInput');
  var file = fileInput.files[0];

  if (file) {
    var formData = new FormData();
    formData.append('image', file);

    // 发送图片数据到服务器
    // 这里可以使用XMLHttpRequest或fetch等方法发送请求
    // 请根据您的需求选择适当的方法
    // 示例中使用XMLHttpRequest发送POST请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 上传成功
        console.log('图片上传成功');
      } else {
        // 上传失败
        console.log('图片上传失败');
      }
    };
    xhr.send(formData);
  }
}

API部分：

[HttpPost]
[RequestSizeLimit(5242880)]
 public async Task<APIResult> upload(IFormCollection collection)
 {

            APIResult rtn = new APIResult();

            if (collection == null)
            {
                rtn.code = -100;
                rtn.msg = "图片列表为空";
                return rtn;
            }
            else
            {
                try
                {
                    string file_path = "";
                    // 预处理 用户参数:用户指定子路径                   
                    string userPath = DateTime.Now.ToString("yyyy-MM-dd");
                    if (collection.ContainsKey("path"))
                    {
                        collection.TryGetValue("path", out Microsoft.Extensions.Primitives.StringValues val);
                        if (!val.Equals("undefined"))
                        {
                            userPath = val.ToString();
                        }
                    }

                    // 预处理 文件路径
                    // 注意：这里可能会根据不同的环境来 修改 路径前面是否需要添加 /
                    // 当发现上传不成功，目录无法创建时，可以尝试修改这里
                    file_path = $"upload/imgs/{userPath}/";
                    var uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, file_path);
                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }

                    // 处理文件
                    FormFileCollection filelist = (FormFileCollection)collection.Files;
                    foreach (IFormFile file in filelist)
                    {
                        // 保存文件到磁盘
                        string name = file.FileName;
                        string FilePath = Path.Combine(uploadPath, name);
                        string type = Path.GetExtension(name);
                        using (var stream = System.IO.File.Create(FilePath))
                        {
                            await file.CopyToAsync(stream);
                        };

                        // 保存文件信息到表
                        Sys_File f = new Sys_File();
                        f.code = "image";
                        f.name = name;
                        f.file_type = type.Trim('.');
                        f.file_group = userPath;
                        f.file_path = $"/{file_path}{name}";
                        f.is_active = true;
                        f.memo = "";
                        f.createTime = DateTime.Now;
                        using (var dbctx = DBHelper.db)
                        {
                            await dbctx.AddAsync(f);
                            await dbctx.SaveChangesAsync();
                        };
                        // 返回消息，包含文件路径
                        rtn.datas = $"/{file_path}{name}";
                        rtn.code = 100;
                        rtn.msg = "文件已保存！";
                    }
                }
                catch (Exception ex)
                {
                    rtn.code = -200;
                    rtn.msg = "图片保存失败!";
                    Log4NetUnit.Instance.Log.Error("图片保存失败:" + ex.Message);
                }
                return rtn;
            }
        }

在这个示例中，我们首先在HTML中创建了一个<input type="file">元素，用于选择要上传的图片。

然后，我们在JavaScript中编写了一个uploadImage函数，该函数在点击"上传图片"按钮时触发。

在uploadImage函数中，我们首先获取到<input>元素，并从中获取到用户选择的图片文件。

然后，我们创建一个FormData对象，并将图片文件添加到其中。

接下来，我们可以使用XMLHttpRequest或fetch等方法将图片数据发送到服务器。

在示例中，我们使用XMLHttpRequest发送了一个POST请求，将图片数据作为FormData发送到/upload端点。

您需要根据您的实际情况修改URL和请求方法。

当请求完成时，我们可以根据响应的状态码来判断上传是否成功。

在示例中，如果状态码为200，则表示上传成功，否则表示上传失败。

请注意，由于安全性限制，JavaScript无法直接访问用户的文件系统。

因此，用户必须手动选择要上传的文件。

维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片，语法如下：

<img src="图片路径" alt="替换文本" />

具体示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>

效果如下：

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码，在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。

图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频

在线咨询

上一篇：20 道必看的 Vue 面试题 - 原力计划
下一篇：前端最全的5种换肤方案总结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

一、图片格式

二、使用图片

创建图像热区链接

您的项目需求