怎么使用CSS让图片水平垂直都居中？

CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。

操作方法

  • 01

    新建一张文档 在桌面新建一张文本文档，改名为1.txt，如下图所示：

  • 02

    基础代码 然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：

  • 03

    后缀名 然后把文本文档后缀名改为.html，如下图所示：

  • 04

    运行网页 然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：

  • 05

    CSS代码 然后写上CSS代码，如下图所示：

  • 06

    垂直水平居中 可以看到图片已经垂直和水平居中，如下图所示：

  • 07

    总代码 <!DOCTYPE html> <head> <title>html</title> <style type="text/css"> .picTiger{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <img class="picTiger" src="C:/Users/Administrator/Desktop/1.png"> </body> <html>

赞 (0)

相关推荐

  • excel如何设置合并的单元格内容水平垂直都居中

    使用excel进行单元格合并时,有时候会需要合并后的单元格的内容水平和垂直都居中,怎么操作呢? 操作方法 01 首先,打开需要进行设置的excel表格. 02 然后用鼠标托选住要合并的单元格. 03 ...

  • CSS背景图片background-image缩放如何居中显示?

    有时候我们想通过CSS使背景图片background-image居中显示,但是发现CSS语法并没有提供background-align:center这样的用法,这篇教程详细地讲解了CSS背景图片bac ...

  • 在一张PPT页怎么设置一组图片水平滚动或垂直滚动效果?

    在网页上经常看到一组图片水平滚动或者垂直滚动的效果,那么在microsoft office powerpoint(PPT)中能否实现呢?答案是可以的.下面我来介绍一下,希望能对大家有所帮助! 方法/步 ...

  • ps中如何让图片或文字水平垂直对齐

    有时,我们想让文字或者图片,在画面中居中对齐或者左对齐或右对齐,现在小编就为大家介绍一下如何让图片或文字水平垂直居中对齐. 操作方法 01 给大家做个例子,首先,我们我们需要新建一个文档  尺寸为 6 ...

  • CSS样式图片下载助手(仿站助手)使用说明教程

    一、CSS样式图片下载助手简介： CSS样式图片下载助手是一款仿站助手软件，他是为解决当你发现了一款你很喜欢的网站风格的时候，但当你复制了它的css样式表的时候，里面某些框架使用图片做的，显示不出来， ...

  • CSS背景图片的使用方式详解一插入滚动图片

    在HTML中合理使用背景图片能够给网页带来不错的体验,那么我们如何在网页中用CSS插入图片呢?今天我就在这里讲解如何插入图片,以及设置全屏或者单个图片显示及背景滚动的问题. 操作方法 01 那么我们该 ...

  • 如何让div里img图片水平垂直居中

    本篇介绍如何让div里img图片水平垂直居中. 操作方法 01 第一种css代码如图所示.display设置成table-cell,text-align为center,垂直居中设置vertical-a ...

  • ps种怎么把图片水平排列

    ps里把图片水平排列的画可以更好的看出两张图片有什么不同的地方 操作方法 01 打开ps软件 02 在ps软件上方的菜单栏中找到窗口菜单 03 点击窗口菜单栏后,在里面把鼠标放在排列上,把鼠标放在排列 ...

  • excel隐藏水平垂直滚动条的方法

    excel隐藏水平垂直滚动条的方法

    我们在使用Excel制作表格的时候有时候需要将水平垂直滚动条隐藏起来,下面给大家讲讲具体操作方法.具体如下:1. 第一步,在电脑上上打开Excel软件,然后点击软件上方的"文件". ...