`

css水平居中的方式

阅读更多

    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。

   

 

    不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):

  1. 加入 table 标签
  2. 设置 display;inline 方法
  3. 设置 position:relative 和 left:50%;

首先要知道什么事块级元素

html中有三种元素

什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

 

一、我们使用方法一来完成居中显示

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

<table>
  <tbody>
    <tr><td>
 <ul>
     <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>

table{
    margin:0 auto;
}

 

第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:

.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}

<div class="container">
    <ul>
    	<li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

 这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

 

第三种方法:方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

 

.container{
    float:left;
 position:relative;
 left:50%
}

.container ul{
 list-style:none;
 margin:0;
 padding:0;
 
 position:relative;
 left:-50%;
}

 

<div class="container">
 <ul>
     <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

 

以上就是三种不同的方式,实现居中效果。

分享到:
评论
1 楼 麦田的设计者 2016-04-23  
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>

.wrap h2{
    margin:0;
   height:200px;
    line-height:200px;

    background:#ccc;
}
</style>
</head>

<body>

<!--下面是代码任务部分-->
<div class="wrap">
    <h2>hi,imooc!</h2>
</div>
</body>
</html>

相关推荐

    css水平居中4种方式

    以下是标题所提及的“css水平居中4种方式”的详细解析: 1. **Flexbox布局** Flexbox(弹性盒布局)是现代CSS布局的一种强大工具,它提供了方便的对齐方式。要使子元素在容器中水平居中,可以设置容器的`display`...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    DIV+CSS水平垂直居中

    本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中,方法是将DIV元素的left和top属性设置为50%,然后通过margin-...

    CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

    CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中,实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果,并对每种方法的优缺点进行分析。 一、...

    CSS网页布局DIV水平居中的各种方法

    CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中,实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一:使用 margin:auto 这种方法是最简单的,直接将 DIV 的 margin ...

    DIV+CSS DIV居中布局

    设置`margin-left`和`margin-right`为`auto`,可以使`&lt;div&gt;`在父容器中水平居中。例如: ```css .centered-div { width: 200px; /* 元素的宽度 */ margin: 0 auto; /* 自动左右外边距实现居中 */ } ``` 2. **...

    CSS 图片水平垂直居中于DIV

    总之,实现CSS中的图片水平垂直居中是一个常见的挑战,但通过理解不同的布局模式和定位方式,我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中,这些技巧都将大有裨益。

    DIV+CSS 图片垂直居中效果

    当需要响应式布局时,可以结合媒体查询(Media Queries)调整不同屏幕尺寸下的居中方式。 8. **JavaScript解决方案** 对于不支持CSS3的老浏览器,可以借助JavaScript动态计算并设置图片的偏移量来实现居中。 综...

    css布局居中和CSS内容居中区别和对应DIV CSS代码.docx

    - **CSS布局居中** 主要用于确保网页的主要部分在浏览器窗口中水平居中,提供良好的视觉效果和用户体验。 - **CSS内容居中** 则是为了使容器内的元素(如文本、图片等)在容器内部居中,增强内容的对齐感和美观度...

    CSS2.1如何让块元素垂直水平居中.rar

    在网页设计中,让元素在页面上垂直和水平居中是一项常见的需求,特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标,无论是对于已知宽高还是未知宽高的块级元素(div)。首先,我们需要理解CSS布局...

    css水平垂直居中

    /* 水平居中 */ align-items: center; /* 垂直居中 */ } #box #funcs { background-color: #666; } #funcs ul { list-style: none; } #funcs ul li { width: 30px; height: 30px; border-radius: 30px;...

    DIV+CSS上下左右绝对居中

    对于水平居中,可以结合 `calc()` 和自动外边距。但是,这种方法不适用于垂直居中,除非容器的高度是固定的: ```css .centered-content { width: 100%; /* 水平填充容器 */ margin: auto; /* 水平居中 */ } ...

    css左右居中对齐

    本文将深入探讨如何使用CSS实现元素的水平居中对齐,并结合`test.html`文件中的示例进行说明。 首先,我们要理解CSS中的几种主要布局方式:常规流、浮动布局、定位布局以及Flexbox和Grid布局。在这四种方法中,我们...

    css如何让浮动元素水平居中

    对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助...

    css3块元素居中

    对于内联元素(如`&lt;span&gt;`),在父元素上设置`text-align:center`即可使其内容水平居中。这是因为`text-align`属性控制的是行内元素的水平对齐方式。然而,这并不适用于块级元素,因为它们默认占据整行。 ### 2. 定...

    css 水平居中,垂直居中,自适应宽度的代码

    ### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的元素水平居中 在Web开发中,使元素能够根据内容的多少自动调整宽度,并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...

    div水平居中的方法

    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法

    CSS 将两个button按钮垂直+水平居中

    在CSS布局设计中,将元素垂直和水平居中是一项常见的需求。...通过这种方式,你就能在CSS中成功地将两个button按钮垂直+水平居中了。这不仅适用于单个按钮,也适用于多个按钮或任何其他具有固定尺寸的元素。

Global site tag (gtag.js) - Google Analytics