您的位置：首页 > 网站优化 > css  >  学习网页技巧：css布局中的居中问题

学习网页技巧：css布局中的居中问题

 更新时间：2017年7月6日 23:13  点击：1824

如何使DIV居中
主要的样式定义如下：body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
如何使图片在DIV 中垂直居中
用背景的方法。举例：body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"
效果如下：
 
如何使文本在DIV中垂直居中
如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：<html>

 代码如下 复制代码
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>

说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

[!--infotagslink--]

相关文章

  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了，但对电脑的要求也是越高越好的，如果配置一般打开ps会比较慢了，那么photoshop打开很慢怎么办呢，下面来看问题解决办法。 1、...2016-09-14

  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24

  • C#窗体布局方式详解

    这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25

  • PyTorch一小时掌握之迁移学习篇

    这篇文章主要介绍了PyTorch一小时掌握之迁移学习篇，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-09-08

  • php语言中使用json的技巧及json的实现代码详解

    目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30

  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为，一直以来都是个难题，无法从根本上防止。但是我们可以尽量减少刷票的伤害，比如：通过人为增加的逻辑限制。基于 PHP，下面介绍防刷票的一些技巧：1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24

  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识，对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24

  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧，都是经过实验的，通读本篇对大家的学习或工作具有一定的价值，需要的朋友可以参考下...2021-10-22

  • 分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题，需要的朋友可以参考下...2016-05-14

  • js中flexible.js实现淘宝弹性布局方案

    这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25

  • 从零开始在vue-cli4配置自适应vw布局的实现

    这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09

  • Illustrator像素级完美绘制经验技巧分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧，各位想知道具体信息的使用者们，那么下面就快来跟着小编一起看一看。 给...2016-09-14

  • 在echarts中图例legend和坐标系grid实现左右布局实例

    这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17

  • Flex网页布局基础入门及实例教程

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14

  • Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01

  • 学习 Vue.js 遇到的那些坑

    这篇文章主要介绍了学习 Vue.js 遇到的那些坑，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-02-04

  • JavaScript瀑布流布局实现代码

    这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • 前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值，下面跟着小编一起来看下吧...2017-01-26

  • 值得分享和收藏的Bootstrap学习教程

    这绝对是一套值得分享和大家收藏的Bootstrap学习教程，完整的知识体系，系统的学习资料，帮助大家开启Bootstrap学习之旅，享受Bootstrap带给大家的奇妙乐趣...2016-05-14

  • 开启BootStrap学习之旅

    当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行...2016-05-05