元素自适应居中

发布于
2017-09-02

更新于
2017-09-03

图片描述

div.box
    div.item*n

固定宽度的box元素下面有n个宽度可变的item元素，请问怎么使用简单的css使得item在box中居中。（同一列的元素需保持对齐）

补充：

我想要的居中并不是每一排的元素居中,如
图片描述

1和5对齐、 2和6要对齐

前端 html css

阅读 7.8k

13 个回答

罗磊恩Léon

使用flexbox应该最简单。你可以用justify-content和align-items把item在box中居中。

kenny_chan

1.2k119

发布于
2017-09-02

更新于
2017-09-04

display: flex;
justify-content: flex-start;

乐行者

3511018

发布于
2017-09-02

更新于
2017-09-02

.box {

width: 300px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;

}

.item {

width: 30px; /*可以在浏览器中调宽度查看效果*/
height: 20px;

}

.box, .item {

border: 1px solid;

}

小乚

3017

发布于
2017-09-02

看来你还没有掌握flex布局,这有不错的教程 http://www.runoob.com/w3cnote...

陌路凡歌

7.9k21119

发布于
2017-09-03

总体居中，方块居右，而你改变的是item 宽度，宽度不定，这个很难，我所认识的css还做不到，就算配合js也很难做到.

你这样的布局，没法实现你说的哪种动态效果。
参考最后的js看看能不能实现移动端网页怎么做？

王能全是谁

1.1k1614

发布于
2017-09-04

添加n个.item-fix元素到box底部，n=item最小的时候一行可以摆放的数量-1

.item-fix {
    display: inline-block;
    width: /*item的宽度*/;
}

方法不太优雅，就是用高度0宽度和item一样的元素，保证每一行都是被排满的，但是确实可以实现你所需要的效果

M先森

292611

发布于
2017-09-04

text-align: justify;分散居中显示就ok

绯红的花io

4451272132

发布于
2017-09-04

后面追加几个元素，宽度和块一样，height为0，visibility:hidden;display:inline-block。追加的个数按需求来。

zwwill_木羽

6.3k2931

发布于
2017-09-04

更新于
2017-09-04

效果先行

方案

其实很简单，我们只要在后面加入一些等宽但是占高为0等隐藏元素即可轻松实现。
如图：

至于【empty】元素的数量需要不小于单行最多元素的数量即可，
最后我们将empty设置隐藏即可

.empty {
    visibility: hidden; 
}

完整demo代码

<html>
<head>
    <meta charset="UTF-8">
    <title>并排等分，单排靠左最齐布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            display: flex;
            width: 1000px;
            flex-flow: row wrap;
            justify-content: space-between;
            margin: 50px auto;
            background-color: #ccc;
            align-content: baseline;
        }
        .main span {
            width: 132px;
            height: 200px;
            display: inline-block;
            background-color: #666;
            margin: 4px;
        }
        .main .emp{
            height: 0;
            border: none;
            margin-top: 0;
            margin-bottom: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="main">
        <span style="">1</span>
        <span style="">2</span>
        <span style="">3</span>
        <span style="">4</span>
        <span style="">5</span>
        <span style="">6</span>
        <span style="">7</span>
        <span style="">8</span>
        <span style="">9</span>
        <span style="">10</span>
        <span style="">11</span>
        <span style="">12</span>  
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
    </div>
</body></html>

【希望对你有些帮助】

HEternally

89929

发布于
2017-09-04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #main {
            display: flex;
            width:1000px;
            height:500px;
            flex-flow:row wrap;
            justify-content: space-around;
            align-items: center;
            margin:50px auto;
            background-color:red;
        }
        #main span {
            display: inline-flex;
            width:290px;
            height:200px;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="main">
        <span style = "background-color:#333;">1</span>
        <span style = "background-color:#444;">2</span>
        <span style = "background-color:#555;">3</span>
        <span style = "background-color:#666;">4</span>
        <span style = "background-color:#777;">5</span>
        <span style = "background-color:#888;">6</span>
    </div>
</body>
</html>

其实没看懂你的需求，这样是否可以

zhuangkay

48318

发布于
2017-09-04

div分三层，root,parent,item
parent 居中
item 改变时，计算parent 的大小


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
        div{
            border: 1px solid #000;
        }
        .item{
            width: 100px;
            height: 100px;
            margin: 3px;
            float: left;
        }
        .root{
            width: 500px;
            height: auto;
            float: left;
        }
        .parent{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="root">
    <div class="parent">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<script type="text/javascript">
(function($, h, c) {
    var a = $([]),
        e = $.resize = $.extend($.resize, {}),
        i,
        k = "setTimeout",
        j = "resize",
        d = j + "-special-event",
        b = "delay",
        f = "throttleWindow";
    e[b] = 250;
    e[f] = true;
    $.event.special[j] = {
        setup: function() {
            if (!e[f] && this[k]) {
                return false;
            }
            var l = $(this);
            a = a.add(l);
            $.data(this, d, {
                w: l.width(),
                h: l.height()
            });
            if (a.length === 1) {
                g();
            }
        },
        teardown: function() {
            if (!e[f] && this[k]) {
                return false;
            }
            var l = $(this);
            a = a.not(l);
            l.removeData(d);
            if (!a.length) {
                clearTimeout(i);
            }
        },
        add: function(l) {
            if (!e[f] && this[k]) {
                return false;
            }
            var n;
            function m(s, o, p) {
                var q = $(this),
                    r = $.data(this, d);
                r.w = o !== c ? o: q.width();
                r.h = p !== c ? p: q.height();
                n.apply(this, arguments);
            }
            if ($.isFunction(l)) {
                n = l;
                return m;
            } else {
                n = l.handler;
                l.handler = m;
            }
        }
    };
    function g() {
        i = h[k](function() {
                a.each(function() {
                    var n = $(this),
                        m = n.width(),
                        l = n.height(),
                        o = $.data(this, d);
                    if (m !== o.w || l !== o.h) {
                        n.trigger(j, [o.w = m, o.h = l]);
                    }
                });
                g();
            },
            e[b]);
    }
})(jQuery, this);
$('.item').resize(function() {
    var rootWidth = $(this).parents('.root').width();
    var itemWidth = $(this).outerWidth()+parseInt($(this).css('margin-left'))+parseInt($(this).css('margin-left'));
    $(this).parent().width(parseInt(rootWidth/itemWidth)*itemWidth);
});
</script>
</body>
</html>