让作品居中显示
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!虽然不是首选的解决方案,但也是个不错的方法,且适用性极广。
分享到:
相关推荐
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 { ...
在IT行业中,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义和控制网页的布局、样式和视觉呈现。"skriegman.github.io"似乎是一个个人或项目的GitHub页面,通常用于展示开发者的作品、教程或者项目的...
对于登录页面,CSS可以帮助定位表单元素,如将其居中显示,或者使用CSS Grid或Flexbox布局创建响应式设计,以适应不同设备的屏幕尺寸。 然后,SASS(Syntactically Awesome Style Sheets)是CSS的预处理器,它允许...
网页模板是网页设计中常用的一种工具,它可以帮助设计师快速构建页面结构,节省设计时间和精力。"母亲节快乐模板下载"这个主题,无疑是为了庆祝母亲节而设计的一系列网页模板,旨在为网站或在线活动提供温馨、感人的...
3. **Flexbox**:Flexbox(弹性盒子布局)是CSS3的一种布局模型,特别适合处理单页网站的垂直和水平对齐,以及在不同屏幕尺寸下的内容排列。它可以轻松实现内容居中、等间距分布等效果。 4. **Grid布局**:CSS Grid...
除本书外,她还著有几十部畅销图书和获奖著作,包括TheNon-Designer'SWebBook、RobinWilliamsDesignWorkshop、TheLittleMacBook等,有的书已被翻译为15种文字。产生了世界性的影响。 编辑推荐 有大师指导,人人...
在网页设计中,致敬页面是一种特殊类型的设计,用于向具有重大影响力的人物或事件表达敬意。在这个案例中,我们关注的是Selena Quintanilla,一位著名的美籍墨西哥歌手,被誉为“Tejano音乐女王”。她以其独特的音乐...
然后通过布局工具或者CSS代码调整文字的对齐方式,确保内容在页面上居中显示。 5. 添加歌曲下载链接:选中页面上希望设置为下载链接的文字,然后通过属性面板中的“链接”栏位,点击右侧的文件夹图标进行歌曲文件的...
扁平UI设计网页模板是一种流行的设计风格,它摒弃了传统的立体效果和过多的装饰性元素,强调简洁、直观和易用。这种设计方法在近年来的网页和移动应用设计中得到了广泛应用,因为它能够提高用户体验,使用户更容易...