HTML+CSS学习笔记 (15)-HTML Tutorial-php.cn

HTML+CSS学习笔记 (15)

WBOY

Release： 2016-06-21 08:54:07

Original

1085 people have browsed it

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中场景，今天我们就来看看怎么设置水平居中的。

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：

html代码：

<body>  <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div></body>

Copy after login

css代码：

<style>  div.txtCenter{    text-align:center;  }</style>

Copy after login

水平居中设置-定宽块状元素

当被设置元素为块状元素时用text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>

Copy after login

css代码：

<style>div{    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/    width:500px;/*定宽*/    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>

Copy after login

也可以写成：

margin-left:auto;margin-right:auto;

Copy after login

注意：元素的“上下 margin” 是可以随意设置的。

水平居中总结-不定宽块状元素方法

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

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比较多）：

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

1.加入 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。

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

举例如下：

html代码：

<div><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></div>

Copy after login

css代码：

<style>table{    margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}</style>

Copy after login

解释：table会根据内容自动生成宽度，由于li元素是块级元素，为了实现在同一行显示，因此需要设置为内联元素，为了让新添加的内容按照一定顺序排列，因此需要规定排列顺序为left，然后每个li距前一个li的间隔为8px，用外边距来实现

2.设置 display;inline 方法

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

html代码：

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

Copy after login

css代码：

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

Copy after login

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

3、设置 position:relative 和 left:50%;

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

代码如下：

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

Copy after login

css代码：

<style>.container{    float:left;    position:relative;    left:50%}.container ul{    list-style:none;    margin:0;    padding:0;    position:relative;    left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>

Copy after login

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

解释：1.向右移动窗口宽度的50%；2.向左移动元素宽度的50%；3.居中达成。

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：

<div class="container">    hi,imooc!</div>css代码：<style>.container{    height:100px;    line-height:100px;    background:#999;}</style>

Copy after login

这样做只能是对单行元素进行居中设置，但是如果是多行要居中就不行了。这个方法虽然简单但是适用性不是很广。

垂直居中-父元素高度确定的多行文本（方法一）

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：

html代码：

<body><table><tbody><tr><td class="wrap"><div>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p>    <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>

Copy after login

css代码：

table td{height:500px;background:#ccc}

Copy after login

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

html代码：

<div class="container">    <div>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>    </div></div>

Copy after login

css代码：

<style>.container{    height:300px;    background:#ccc;    display:table-cell;/*IE8以上及Chrome、Firefox*/    vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>

Copy after login

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolutefloat : left 或 float:right

Copy after login

元素会自动变为以 display:inline-block的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">    <a href="#" title="">进入课程请单击这里</a></div>

Copy after login

css代码

<style>.container a{    position:absolute;    width:200px;    background:#ccc;}</style>

Copy after login

我的公众号二维码

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

HTML+CSS学习笔记 (15)

水平居中设置-行内元素

水平居中设置-定宽块状元素

水平居中总结-不定宽块状元素方法

1.加入 table 标签

2.设置 display;inline 方法

3、设置 position:relative 和 left:50%;

垂直居中-父元素高度确定的单行文本

垂直居中-父元素高度确定的多行文本（方法一）

垂直居中-父元素高度确定的多行文本（方法二）

隐性改变display类型