html - 你如何居中列/行

Question

我有 html 代码，可以制作一个 3 x 3 的表格，每个方形 div 中都有图像。这是 html 的代码(基本上每行三行三列)。我想将 3 x 3 表格放置在页面中央(水平)，但我不确定如何操作。任何的意见都将会有帮助。谢谢!

<div class="container">
    <div class="row">
        <div class = "col-md-4">
            <div class ="boxed">
                <a href="bucket-list.html"><img class="grayscale" src="img6.jpg" width="220px"height="220px"></a>
            </div>
        </div>
        <div class = "col-md-4">
            <div class ="boxed">
                <a href="christmas.html"><img class="grayscale" src="img1.png" width="220px"height="220px"></a>
            </div>
        </div>
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale" src="uiuc.png" width="220px"height="220px">
            </div>
        </div>
    </div>
    <div class="row">
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale"src="img4.png" width="220px"height="220px">
            </div>
        </div>
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale"src="swe.png" width="220px"height="220px"> 
            </div>
        </div>
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale" src="fashion2.png" width="220px"height="220px">
            </div>
        </div>
    </div>
    <div class="row">
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale" src="india.png" width="220px"height="220px">
            </div>
        </div>
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale"src="nielsen.png" width="220px"height="220px">
            </div>
        </div>
        <div class = "col-md-4">
            <div class ="boxed">
                <img class="grayscale" src="city.png" width="220px"height="220px">
            </div>
        </div>
    </div>
</div>

这是CSS代码:

.boxed {
    border:2.24px solid white;
    width:225px;
    height:225px;
    background: #ffffff;
    text-align: center;

}

Answer 1

因为您的 .boxed 元素具有固定宽度，您可以使用 margin: 0 auto; 将它们居中放置在您的列中:

[class^="col-"] {
    border: 1px solid red;
}

.boxed {
    border:2.24px solid white;
    width:225px;
    height:225px;
    background: #ffffff;
    text-align: center;
	margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="boxed">
              <a href="bucket-list.html"><img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="boxed">
                <a href="christmas.html"><img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px">
            </div>
        </div>
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px"> 
            </div>
        </div>
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px">
            </div>
        </div>
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px">
            </div>
        </div>
        <div class="col-md-4">
            <div class="boxed">
                <img class="grayscale" src="http://placehold.it/220x220" width="220px" height="220px">
            </div>
        </div>
    </div>
</div>