div+css背景图垂直居中 - 爱问答

(爱问答)

div+css背景图垂直居中

div+css设计的时候,一张比较小的图需要设置为垂直居中。请问该怎么设置?

如果只是设置 background-position的话,它的位置会跑到水平居中,可以设置为垂直居中吗?

div+css实现背景图片居中;


首先设置一个div区域,定义一个最外围的区域块,然后再次设置一个小的div区域在其css样式里设置一个背景图片,让小的div区域居中即可:属性:margi:0 auto;

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>效果区</title>

</head>
<body>
<style>
.main{ width:100%; height:500px;background-color:#06F;}
.bjimg{ background:url(111111.png) no-repeat; width:525px; height:300px; margin:0 auto; }
</style>
<div class="main">
    <div class="bjimg">
    
    </div>
</div>
</body>
</html>

实现效果网页区域:

div+css 背景图垂直居中

标签以及属性详解:

外围div样式取名main:设置一个宽度为100%,高度height:500px的区域让其背景颜色background-color:#06F;蓝色,这样可以更好的浏览效果;

内部的一个小的区域div取名:bjimg,区域大小就是图片的大小;设置一张背景图片,background:url(111111.png) no-repeat;,

margin:0 auto; 让其在大区域块中左右居中,上下设置为0,当然如果感觉太靠上了可以将其值(0)修改一下,数值越大距离越远

相关标签:css

下一篇:css怎么实现浏览器窗口改变大小后样式还是居中

上一篇:css如何给div容器设置背景颜色

热门标签:
英语 谜语 作文 数学 公式 语文 物理 化学 工艺 java c语言 实验 方程 金属 分子 数据库 硫酸 酒精 运算 石油 vc 世界大战 php 化合物 mysql
最新更新:
电学的一个小问题 为什么打点计时器只能粗略瞬时速度 lookdownupon用法 中专都考不上大学有必要复读一年吗? 如图,已知∠B=∠DEF,AB=DE,请添加一个条件使△ABC≌△DEF,则需添加的条件是__________. 求曲线y=2x^2和直线y=2的所围图形的面积 夜上受降城闻笛是哪句 这个怎么填数字? 小明家下五层楼是5楼,那么小明家上五层楼是几层楼? 填空题,这个题目是怎么算的呢…… 22335577()143中括号里填什么数字。 懂得人帮我看一下这个英文是啥意思??? 最小的物质单位是什么 怎么估算根号52000000 about的重读字母是哪里