CSS使行的元素中心

Question

我正在尝试将一些元素添加到div的中心。对于最大宽度为CSS -

的移动设备，我使用了以下320px代码

@media only screen and (min-width: 0px) and (max-width: 320px){
    .header .shopping-cart{
        padding: 15px 0 0 0;
        float: left;
    }

    .header .contact{
        padding: 10px 0 0 0;
    }

    .header .contact span{
        text-align: center;
    }

    .header .search{
        padding: 10px 0 0 0;
        max-width: 200px;
    }
}

<div class="header">
            <div class="row">

                <div class="col-md-4 col-sm-4">
                    <div class="contact">
                        <span>
                            <i class="fa fa-phone red"></i>
                            999-999-9999
                        </span>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="search">
                        <form role="form" class="form">
                            <div class="input-group">
                                <input type="text" placeholder="Search..." class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="shopping-cart">
                        <a href="#" class="cart-link">
                            <!-- Image -->
                            <img alt="" src="img/cart.png" class="img-responsive">
                            <!-- Heading -->
                            <h4>Shopping Cart</h4>
                            <span>3 items $489/-</span>

                            <div class="clearfix"></div>
                        </a>
                        
                </div>
            </div>
            
        </div>

它显示以下输出 -

现在我想把这些元素放到每一列的中间。

提前致谢。

Answer 1

您可以使用flexbox：

小提琴：https://jsfiddle.net/12o1Luk4/

@media only screen and (min-width: 0px) and (max-width: 320px) {
    .row
    {
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .header .shopping-cart {
        padding: 15px 0 0 0;
        float: left;
    }
    .header .contact {
        padding: 10px 0 0 0;
    }
    .header .contact span {
        text-align: center;
    }
    .header .search {
        padding: 10px 0 0 0;
        max-width: 200px;
    }
}