CSS实现水平局中、垂直局中详解

编程之家收集整理的这篇文章主要介绍了CSS实现水平局中、垂直局中详解编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在div+css布局中,水平、垂直局中是很常用的,但对于像我这样的小白来说,经常会出现有些css设置不起作用,后来就网上搜索一些资料研究了一番,现在总结如下,以后好翻看。
对于行内元素、块状元素,定宽的元素、不定宽的元素,水平、垂直局中的设置都是不一样的。

水平局中

1、行内元素:

当子元素为行内元素,对父元素设置text-align:center;

2、定宽块状元素

当子元素为定宽块状元素,设置左右margin值为auto,如:margin:0 atuo;

3、不定宽块状元素

我们经常会遇到不定宽度块级元素的使用,如分页导航,因为分页的数目不定,所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式:

  • 加入 table 标签
  • 设置 display;inline 方法
  • 设置 position:relative 和 left:50%;

(1)加入 table 标签

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步:为这个 table 设置“左右 margin:auto”(这个和定宽块状元素的方法一样)。
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>

css样式

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

缺点:是增加了无语义的HTML标签增加了嵌套深度

(2)设置 display:inline 方法

改变块级元素的 dispaly 为 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>

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>

缺点:将块级元素的display设置为inline,于是少了很多功能,比如盒子模型

(3)设置 position:relative 和 left:50%;

通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
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>

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>

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

4、通用方案

flex布局,对父元素设置display:flex;justify-content:center;

这四种方法各有利弊,根据实际情况选用。

垂直居中

1、父元素高度确定的单行文本

设置父元素的height等于行高line-height。注意:如果多行内联文本这样设置就会被切割成几部分,很难看,如下:

这里写图片描述

2、父元素高度确定的多行文本

3、父元素高度不确定的多行文本

以上有三种情况详解请看:https://segmentfault.com/a/1190000003111071

4、通用方案

flex布局,给父元素设置{display:flex; align-items:center;}。

总结

以上是编程之家为你收集整理的CSS实现水平局中、垂直局中详解全部内容,希望文章能够帮你解决CSS实现水平局中、垂直局中详解所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的HTML相关文章

Mip是什么意思以及作用有哪些
MIP安装的具体步骤有哪些
怎么使用MIP组件
Mip的内联框架组件是什么
Mip轮播图组件中的重要属性讲解
HTML添加超链接、锚点的方法及作用详解(附视频)
怎么创建初始的MIP配置及模板文件
jQuery表单验证提交:前台验证一(图文+视频)
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注