快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

css样式如何水平垂直,水平垂直居中css4种方法

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

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中让元素垂直水平居中的几种方法

CSS中,如果我们想让元素水平垂直居中,有很多种方法可以达成我们想要的效果。

接下来就来看看有哪些方法。

CSS文字垂直居中

01

先写上html代码,如图,内容很简单,就是一个div里有一段文本。

02

再写上div对应的样式,如图,这里只设置了div的边框和高度,宽度。

03

如果这里显示的话,我们看下页面,文本是不会水平居中和垂直居中的。

04

要让文本水平居中,我们可以添加样式:text-align: center;

要让文本垂直居中,我们可以添加样式: vertical-align: middle;和display: table-cell;

05

添加完这几个样式后,刷新页面可以看到现在的文本已经可水平居中和垂直居中了。


本文题目:css样式如何水平垂直,水平垂直居中css4种方法
文章URL:http://6mz.cn/article/dsdogge.html

其他资讯