`
jickcai
  • 浏览: 246908 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css让作品居中显示的几种方法

    博客分类:
  • css
阅读更多

让作品居中显示
 1.使用自动外边距实现居中
  css中首选的让元素水平居中的方法就是使用margin属性--将元素的margin-left
 和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素
 创建一个起容器作用的div.特别注意的一点是,必须为该容器指定宽度:
 div#container{
  margin-left:auto;
  margin-right:auto;
  width:168px;}
 2.使用text-align实现居中
  另一种实现元素居中的方法是使用text-align属性,将该属性值设置为center
 并应用到body元素上即可。这种做法是彻头彻尾的hack,但它却能 兼容大多数浏览器,
 所以在某些情况下也自然必不可少.
  之所以说它是hack,是因为这种方法并没有将文本属性应用到文本上,而是应用到了
 作为容器的元素上。这也就给我们带来了额外的工作。
  在创建好布局必须的div后,我们要按照如下的代码为body应用text-align属性:
  body{text-align:center;}
  之后会出现什么问题么?body的所有子孙元素都会被居中显示.
  因此,我们就需要用再写一条规则,让其中的文本回到默认的居左对齐:
  p{text-align:left;}
  可以想象这条附加的规则将带来一些不便。另外,真正完全遵循标准的浏览器
  并不会改变容器的位置,而只会让其中的文字居中显示。
 3.组合使用自动外边距和文本对齐
  body{text-align:center;}
  #container{
   margin-left:auto;
   margin-right:auto;
   border:1px solid red;
   width:168px;
   text-align:left;
  }

  可是这始终是个hack,无论如何也算不上完美。我们还是需要为居中容器中的文本
  编写附加的规则,但至少在各个浏览器中看起来都不错.
 4.负外边距解决方案
  负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用
  绝对定位和负外边距两种技巧。

  下面将介绍该方案的具体实现方法。首先创建一个包含居中元素的容器,然后将其
  绝对定位于相对页面左边缘50%的位置。这样,该容器的左外边距将从页面50%宽度
  的宽度的位置开始算起。
  然后将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面
  水平方向的中点。
  #container{
   background:#ffc url(images/28.png) repeat-y center;
   position:absolute;
   left:50%; width:760px; margin-left:-380px;}

  看,没有任何hack!虽然不是首选的解决方案,但也是个不错的方法,且适用性极广。

分享到:
评论

相关推荐

    HTML5 + CSS 网页

    HTML提供了几种方法来实现文字的对齐。 - **使用 `<p>` 标签实现对齐**:可以通过 `<p>` 标签中的 `align` 属性来实现文本的对齐。例如: ```html 左对齐文本。 居中文本。 右对齐文本。 ``` 上面的代码...

    网页设计作品

    在这个"网页设计作品"中,我们可以看到一个初级级别的实践项目,它主要利用了HTML和CSS这两种核心技术来构建网页。 HTML(HyperText Markup Language)是网页设计的基础,它是用来描述网页结构的语言。在初级网页...

    简单网页设计

    `使元素居中显示。学习CSS有助于提升网页的视觉效果和用户体验。 3. 响应式设计:随着移动设备的普及,响应式设计变得至关重要。它确保网页在不同尺寸的设备上都能正常显示。通过使用媒体查询(@media)、百分比...

    素材收集问题

    为了确保网页能在各种浏览器中正常显示,开发者需要了解并使用特定的Hack CSS技术来针对不同的浏览器编写特殊的样式规则。以下是一些常见的Hack CSS示例: 1. **IE6 Hack**: ```css /* IE6 */ .ie6-only { ...

    skriegman.github.io

    在IT行业中,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义和控制网页的布局、样式和视觉呈现。"skriegman.github.io"似乎是一个个人或项目的GitHub页面,通常用于展示开发者的作品、教程或者项目的...

    Kreass-11:简单着陆页

    对于登录页面,CSS可以帮助定位表单元素,如将其居中显示,或者使用CSS Grid或Flexbox布局创建响应式设计,以适应不同设备的屏幕尺寸。 然后,SASS(Syntactically Awesome Style Sheets)是CSS的预处理器,它允许...

    母亲节快乐模板下载

    网页模板是网页设计中常用的一种工具,它可以帮助设计师快速构建页面结构,节省设计时间和精力。"母亲节快乐模板下载"这个主题,无疑是为了庆祝母亲节而设计的一系列网页模板,旨在为网站或在线活动提供温馨、感人的...

    Single-Page-Website:响应式网页

    3. **Flexbox**:Flexbox(弹性盒子布局)是CSS3的一种布局模型,特别适合处理单页网站的垂直和水平对齐,以及在不同屏幕尺寸下的内容排列。它可以轻松实现内容居中、等间距分布等效果。 4. **Grid布局**:CSS Grid...

    排版布局设计技巧_对比+对齐+重复+亲密性(第3版)

    除本书外,她还著有几十部畅销图书和获奖著作,包括TheNon-Designer'SWebBook、RobinWilliamsDesignWorkshop、TheLittleMacBook等,有的书已被翻译为15种文字。产生了世界性的影响。 编辑推荐  有大师指导,人人...

    致敬页面:Selena Quintanilla的致敬页面

    在网页设计中,致敬页面是一种特殊类型的设计,用于向具有重大影响力的人物或事件表达敬意。在这个案例中,我们关注的是Selena Quintanilla,一位著名的美籍墨西哥歌手,被誉为“Tejano音乐女王”。她以其独特的音乐...

    Dreamweaver怎么设计歌曲下载链接页面?

    然后通过布局工具或者CSS代码调整文字的对齐方式,确保内容在页面上居中显示。 5. 添加歌曲下载链接:选中页面上希望设置为下载链接的文字,然后通过属性面板中的“链接”栏位,点击右侧的文件夹图标进行歌曲文件的...

    扁平UI设计网页模板

    扁平UI设计网页模板是一种流行的设计风格,它摒弃了传统的立体效果和过多的装饰性元素,强调简洁、直观和易用。这种设计方法在近年来的网页和移动应用设计中得到了广泛应用,因为它能够提高用户体验,使用户更容易...

Global site tag (gtag.js) - Google Analytics