关于水平居中

原创 2015年11月17日 19:52:25

水平居中——行内元素
对于如文本,图片等行内元素,使用text-align:center;

水平居中——定宽块状元素
前提条件:
1. 宽度确定
2. 块状元素
方法:左右margin设为auto;

<div>定宽块状元素</div>
div{
    width:500px;
    margin:10px auto;
}

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

  1. 加入table标签
    第一步:为需要居中的元素加上table标签(包括tbody tr td);
    第二步:为这个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 type="text/css">
    table{
        margin:0 auto;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    li{
        float:left;
        display:inline;
        margin-right:8px;
    }
</style>
  1. 设置display:inline
    第一步:将该块级元素设置display:inline;
    第二步:使用text-align:center;
html部分
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
css部分
<style>
    .container{
        text-align:center;
    }
    .container ul{
        list-style:none;
        padding:0;
        margin:0;
        display:inline;
    }
    .container li{
        margin-right:8px;
        display:inline;
    }
</style>
  1. positoin:relative
    第一步:给父元素设置float;
    第二步:父元素position:relative;left:50%;
    第三步:子元素设置 position:relative 和 left:-50% 来实现水平居中。
html部分
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

关于水平居中

单个div都知道用margin :XX px   auto;来实现,但对于多个块级元素呢?那就把这些块级元素如div设置为display:inline-block;再把父元素设置为text-align...
  • u012181244
  • u012181244
  • 2014年11月25日 23:44
  • 292

用CSS/CSS3 实现 水平居中和垂直居中的完整攻略

水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:cente...
  • Summer_lover_
  • Summer_lover_
  • 2017年03月26日 21:05
  • 2621

元素水平居中的几个方法

1、行内元素的居中,例如想设置文本、图片等行内元素水平居中时,可以通过父元素设置 text-align:center 来实现,即给需要设置的元素添加一个父元素的容器,然后设置这个父元素(容器)的tex...
  • u010120864
  • u010120864
  • 2015年12月05日 11:07
  • 2730

float 元素的水平居中

http://hi.baidu.com/popo0027/item/032c1d4d7ce05cefa5c06638 经常用到ul li 作为头部菜单布局,...
  • ISaiSai
  • ISaiSai
  • 2014年05月14日 11:11
  • 2576

css 水平居中和垂直居中

转自子非鱼87(http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html) 1.水平居中 (1) 文本、图片等行内元素的水平...
  • tangxu242424
  • tangxu242424
  • 2015年01月30日 15:31
  • 942

css(css3)实现垂直水平居中的那些事

都说“金三银四求职季”,本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:“说说垂直水平居中都有哪些实现方式吧?”       面试过程巴拉巴拉一...
  • u014516981
  • u014516981
  • 2017年03月03日 20:10
  • 912

设置按钮内容水平居中方式

  • baohanqing
  • baohanqing
  • 2016年05月06日 08:02
  • 539

CSS/CSS3 如何实现元素水平居中

先上效果图 图中链接:inline-block元素之间存在空白间距 图中链接:Horizontally Centered Menus with no CSS hacks 实现代码: ...
  • u010758724
  • u010758724
  • 2015年10月22日 20:13
  • 2037

让div中的文字水平居中和垂直居中的css

.box { height: 100px; width: 30%; text-align:center;//水平居中 line-height:100px;//跟高度一样 }...
  • HowCanYouDoIt
  • HowCanYouDoIt
  • 2016年08月11日 16:00
  • 2239

用css实现垂直水平居中的几种方法

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 6236
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于水平居中
举报原因:
原因补充:

(最多只允许输入30个字)