文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS属性让整体布局的居中以及让网页的背景居中的方法

2024-04-02 19:55

关注

本篇内容主要讲解“CSS属性让整体布局的居中以及让网页的背景居中的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS属性让整体布局的居中以及让网页的背景居中的方法”吧!

DIV+CSS布局居中问题

在DIV+CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而CSS来设置居中也是非常简单的。

1、首先介绍使用CSS属性让整体布局的居中:

设置页面父级居中,那整个页面的父级是什么呢?我们可以想象整个页面的内容是由和这两个包含,那根据较近父级我们就设置body的CSS来实现居中问题,可以向在内容里居中有text-aligh:center;而这个元素在IE下有用,经过试验在火狐等浏览器下只设置text-aligh:center;居中是无法让布局居中,那我们还需要设置个“margin:0auto;”这个是什么意思呢,意思是内容上下为0距离,而左右为“auto”自动,这样就可以设置实现网页布局居中具体CSS的居中代码为:

body{text-aligh:center;margin:0auto;}但是即使这样也会出现问题,因为你没有设置布局有多宽“width”,一旦你内容布局中在最外层CSS控制中,设置了float:属性,那布局将会向你设置的float:方向靠,解决方法,除了设置body的居中的CSS属性外,还需在布局设置最外层div也居中,而且定义宽度是多少,假如网页宽度为700px,最外层CSS样式为的class="weicheng",那设置应该这样“.weicheng{margin:0auto;width:700px;}”即可。完整实例为(可将代码拷贝新建html文件浏览观看效果):

以下为引用的内容:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>www.divCSS5.com的CSSdiv的布局居中实例title> <styletypestyletype="text/CSS"> <!--  body{text-align:center;margin:0auto;}   .waicheng{color:#0066CC;margin:5pxauto;width:700px;height:200px;  border:1pxsolid#000000;}  --> style> head> <body> <divclassdivclass="waicheng">我是CSS中的居中的实验;我的布局外层有一个边为1px黑色边,   我宽700px,高为200px,设置了与顶部内容距离为5PXdiv> body> html>

DIV+CSS布局居中实例浏览

2、介绍使用CSS属性让网页的背景居中:

这里居中就包括了左右居中与上下居中,居中代码如下:
body{BACKGROUND:#FFFurl(/file/upload/202210/19/ykxhee1keti.gif)no-repeatcenter;}//这段话意思就是让CSS-logo.gif这个图片设置背景不重复(no-repeat),并将居中(center)这个居中是左右居中,而垂直不需要设置,自动会居中。

3、CSS让介绍文字、图片内容左右上下居中方法教程:

我们知道左右就中好办,直接用text-align:center;即可让文字与图片内容居中,但是垂直呢,假如我们在高度为120px的高度下垂直居中,图片居中是vertical-align:middle;CSS属性,文字居中就要靠设置行高方法居中文字内容,这里我们设置为120px的高度这需要设置个line-height:120px;这样就通过CSS属性类样式来实现文字与图片的上下左右居中。

整个网站居中的代码如下:

以下为引用的内容:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>www.divCSS5.com的CSSdiv的完整居中实例title> <styletypestyletype="text/CSS"> <!--  body{text-align:center;margin:0auto;background:url(/file/upload/202210/19/ykxhee1keti.gif)no-repeatcenter;}  .waicheng{color:#0066CC;margin:5pxauto;width:700px;height:120px;  line-height:120px;border:1pxsolid#000000;}  .waichengimg{vertical-align:middle;}  --> style> head> <body> <divclassdivclass="waicheng">我是CSS中的居中的完整居中实例;  我的布局外层有一个边为1px   <imgsrcimgsrc="/file/upload/202210/19/ojnq0c4yu4c.gif" alt="图片内容居中"/>div> body> html>

到此,相信大家对“CSS属性让整体布局的居中以及让网页的背景居中的方法”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯