css佈局網頁水平居中常用方法_經驗交流-css教學-PHP中文網

首頁

web前端

css教學

css佈局網頁水平居中常用方法_經驗交流

PHP中文网

May 16, 2016 pm 12:06 PM

頁面水平居中通常會令人很頭疼，尤其新手。瀏覽器之間的不相容也會帶來很大問題。下面來說一下常見的頁面水平居中辦法。
以下內容請參閱《精通css》。
html代碼：

程式碼如下

<body>   
<div id="wrapper">   
</div>   
</body>   
ie居中办法：   
body {   
     text-align:center;   
     min-width:760px;   
}   
#wrapper {   
     width:720px;   
     text-align:left;   
}

ie會將text-align:center 誤以為讓所有東西居中，而不只是文字。然後將容器的內容重新對準左邊即可。

非ie：

代碼如下:

#wrapper {   
     width:720px;   
     margin:0 auto;   
}

如何相容ie和非ie?如下：

程式碼如下:

#wrapper {   
     width:720px;   
     position:relative;   
     left:50%;   
     margin-left:-360px;   
}

先將容器左邊邊緣定位到頁面中間，然後向左移動它寬度的一半。

以上就是css版面網頁水平居中常用方法_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

前端面试官常问的问题Mar 19, 2024 pm 02:24 PM

在前端开发面试中，常见问题涵盖广泛，包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此，应试者应充分准备这些方面，以展现自己的能力和专业知识。

CSS布局单位的演变与应用：从像素到根据根元素字体大小的相对单位Jan 05, 2024 pm 05:41 PM

从px到rem：CSS布局单位的演变与应用引言：在前端开发中，我们经常需要用到CSS来实现页面布局。在过去的几年间，CSS布局单位也经历了演变和发展。最开始我们使用的是像素（px）作为单位来设置元素的大小和位置。然而，随着响应式设计的兴起和移动设备的普及，像素单位逐渐暴露出一些问题。为了解决这些问题，新的单位rem应运而生，并逐渐被广泛应用于CSS布局中。一

如何通过纯CSS实现瀑布流布局的方法和技巧Oct 20, 2023 pm 06:01 PM

如何通过纯CSS实现瀑布流布局的方法和技巧瀑布流布局（WaterfallLayout）是一种在网页设计中常见的布局方式，它通过将内容以多列的方式排列，每一列的高度不一致，从而形成像瀑布般的视觉效果。这种布局常常被应用于图片展示、商品展示等需要展示大量内容的情景中，具有良好的用户体验。实现瀑布流布局的方法有很多种，可以使用JavaScript或CSS来完成。

CSS Positions布局实现响应式图片排版的方法Sep 26, 2023 pm 01:37 PM

CSSPositions布局实现响应式图片排版的方法在现代Web开发中，响应式设计已成为一种必备的技能。而在响应式设计中，图片排版是一个重要的考虑因素之一。本文将介绍如何使用CSSPositions布局实现响应式图片排版，并提供具体的代码示例。CSSPositions是CSS的一种布局方式，它可以让我们根据需要在网页中任意定位元素。在响应式图片排版中，

CSS布局技巧：实现圆形网格图标布局的最佳实践Oct 20, 2023 am 10:46 AM

CSS布局技巧：实现圆形网格图标布局的最佳实践在现代网页设计中，网格布局是一种常见且强大的布局技术。而圆形网格图标布局则是一种更加独特和有趣的设计选择。本文将介绍一些最佳实践和具体代码示例，帮助你实现圆形网格图标布局。HTML结构首先，我们需要设置一个容器元素，在这个容器里放置图标。我们可以使用一个无序列表（<ul>）作为容器，列表项（<l

CSS布局教程：实现圣杯布局的最佳方法Oct 19, 2023 am 10:19 AM

CSS布局教程：实现圣杯布局的最佳方法，附带代码示例引言：在网页开发中，布局是非常重要的一部分。好的布局能够使网页达到更好的可读性和可访问性。其中，圣杯布局是一种非常经典的布局方式，它能够在实现自适应的情况下使内容居中，保持优雅的显示效果。本文将为大家介绍如何使用最佳的方法实现圣杯布局，并给出具体的代码示例。一、什么是圣杯布局？圣杯布局是一种常见的三栏布局，

CSS布局技巧：实现堆叠卡片效果的最佳实践Oct 22, 2023 am 08:19 AM

CSS布局技巧：实现堆叠卡片效果的最佳实践在现代网页设计中，卡片式布局成为了一种非常流行的设计趋势。卡片布局能够有效地展示信息，提供良好的用户体验，并且方便响应式设计。在这篇文章中，我们将分享一些实现堆叠卡片效果的最佳CSS布局技巧，同时提供具体的代码示例。使用Flexbox布局Flexbox是CSS3中引入的一种强大的布局模型。它能够轻松地实现堆叠卡片效果

CSS布局教程：实现两栏响应式布局的最佳方法Oct 18, 2023 am 11:04 AM

CSS布局教程：实现两栏响应式布局的最佳方法简介：在网页设计中，响应式布局是一种非常重要的技术，它能使网页根据用户设备的屏幕大小和分辨率自动调整布局，提供更好的用户体验。在本教程中，我们将介绍如何使用CSS来实现一个简单的两栏响应式布局，并提供具体的代码示例。一、HTML结构：首先，我们需要创建一个基本的HTML结构，如下所示：<!DOCTYPEht

See all articles