Question

我有一个html代码，它使每个方格div中的图像成为一个3乘3的表格。这是html的代码（每行基本上有三行和三列）。我想将3×3的表放在页面的中心（水平），但我不知道该怎么做。任何的意见都将会有帮助。谢谢！

var car = {
    color: null,
    seating: null,
    fuelconsumption: null
}

这是css代码：

<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>

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>

Answer 2

无法访问其余的Bootstrap样式，不清楚是否有任何可能会干扰下面的样式。但是，如果没有任何样式冲突，下面的样式会将<div class ="boxed">命名为3x3网格并横向居中<div class="container">：

.container {
position: relative;
display: block;
width: 689px;
margin: 12px auto;
}

.boxed {
display: inline-block;
float: left;
border:2.24px solid white;
width:225px;
height:225px;
background: #ffffff;
}

.col-md-4:nth-of-type(3n+1) .boxed {
clear: left;
}

Answer 3

如果您希望整个表格以整个页面为中心，请将所有代码包装在另一个div中。

String.Format(mailTemplate, DirectCast(args, Object()))

你如何使列/行居中

3 个答案: