十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
CSS是层叠样式表。下面,我们来看看怎么使用CSS让图片水平垂直都居中吧。
创新互联专注于大观企业网站建设,成都响应式网站建设公司,商城网站定制开发。大观网站建设公司,为大观等地区提供建站服务。全流程按需求定制网站,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
新建一张文档
在桌面新建一张文本文档,改名为1.txt,如下图所示:
基础代码
然后打开文本文档,编写基础代码,再把桌面上的老虎图片引入进去,如下图所示:
后缀名
然后把文本文档后缀名改为.html,如下图所示:
运行网页
然后在浏览器中运行网页,现在图片有了,只是还没有居中,图片居住代码要用CSS写,如下图所示:
CSS代码
然后写上CSS代码,如下图所示:
垂直水平居中
可以看到图片已经垂直和水平居中,如下图所示:
总代码
!DOCTYPE html
head
titlehtml/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.jpg"
/body
html
CSS中,如果我们想让元素水平垂直居中,有很多种方法可以达成我们想要的效果。
接下来就来看看有哪些方法。
01
先写上html代码,如图,内容很简单,就是一个div里有一段文本。
02
再写上div对应的样式,如图,这里只设置了div的边框和高度,宽度。
03
如果这里显示的话,我们看下页面,文本是不会水平居中和垂直居中的。
04
要让文本水平居中,我们可以添加样式:text-align: center;
要让文本垂直居中,我们可以添加样式: vertical-align: middle;和display: table-cell;
05
添加完这几个样式后,刷新页面可以看到现在的文本已经可水平居中和垂直居中了。