css居中小技巧

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css居中小技巧相关的知识，希望对你有一定的参考价值。

一、行内元素-水平居中

　　在父元素的样式中添加：　

text-align:center;

 

二、定宽块级元素-水平居中

　　所谓定宽块级元素指块级元素的宽度指定，而不是默认的100%，否则此方法无效；

　　代码：

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


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

 

三、不定宽块级元素-水平居中

　　三种思路：

  1. 加入 table 标签，将这个table居中；
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置； 
    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;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

    以上是例子代码。

  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；

以上是关于css居中小技巧的主要内容，如果未能解决你的问题，请参考以下文章

CSS代码片段

CSS代码片段

CSS小技巧使用

如何在场景 QGraphicsScene 上居中小部件

FLTK 中的居中小部件

如何在堆栈中垂直或水平居中小部件？