Div的水平中心对齐（网格布局）

时间：2015-03-26 12:40:01

标签： html css css3 centering grid-layout

我使用div设计了网格布局。如下所示。但是，我需要将这些水平居中放在Web浏览器的中间。有人可以告诉我怎么样？我尝试的所有内容似乎都将所有div集中在一起，就好像它们位于彼此顶部的一列中一样。

提前致谢。

HTML 

<div class="row">
    <div class="col">
        <div class="trigger vertical img1">
            <div tabindex="0" class="maincontent static"><div class="slider">
<img src="slide1.png" width="200" />
<img src="slide2.png" width="200" />
<img src="slide3.png" width="200" />
<img src="slide4.png" height="200"/>
</div></div>
      </div>
    </div>
    <div class="col">
        <div class="trigger img1">
            <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div></div>
        <div class="trigger">
             <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
        </div>
    </div>
    <!-- </div>
<div  class="row">-->
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Text Here 4<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>Text Here 5<p></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>Text Here 6<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>Text Here 7<p></div>
        </div>
    </div>
</div>
<div class="row">
  <div class="trigger">
        <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
    </div>
    <div class="trigger large">
        <div tabindex="0" class="maincontent staticlarge"><div class="slider">
<img src="slide1.png" height="200" width="400" />
<img src="slide2.png" height="200" width="400" />
<img src="slide3.png" height="200" width="400" />
<img src="slide4.png" height="200" width="400" />
</div></div>
    </div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent staticlarge">
<iframe align="center" src="clock2.php" width="300px" height="200px" scrolling="no" frameBorder="0" style="margin-left:5px;"></iframe></div></div>

CSS 

<style type="text/css">
.trigger {
width:200px;
height:200px;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.hover-img, .hover-img.hover_effect {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.static {
position: relative;
width: 200px;
height: 200px;
text-align: center;
font-size: 0;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px; 
}
.staticlarge {
position: relative;
width: 400px;
height: 200px;
text-align: center;
font-size: 0;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px; 
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.trigger:hover > .hover-img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
font-size: 14px;
color: #FFF;
}
.trigger:hover > .hover-img.img4 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img5 {
background-color: #f6c447;
}
.trigger:hover > .hover-img.img6 {
background-color: #92cf96;
}
.trigger:hover > .hover-img.img7 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img12 {
background-color: #92cf96;
}
.trigger:hover .hover-img img {
display: none;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
#apDiv1 {
position: absolute;
width: 100px;
height: 200px;
z-index: 1;
background-color: #999999;
}
.trigger:hover p {
display:block;
transform:scaleX(-1)
}

2 个答案:

答案 0 :(得分：1)

使用div打包您的HTML，如<div class="bodyCont"> 

<div class="bodyCont">
<div class="row">
    <div class="col">
        <div class="trigger vertical img1">
            <div tabindex="0" class="maincontent static"><div class="slider">
<img src="slide1.png" width="200" />
<img src="slide2.png" width="200" />
<img src="slide3.png" width="200" />
<img src="slide4.png" height="200"/>
</div></div>
      </div>
    </div>
    <div class="col">
        <div class="trigger img1">
            <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div></div>
        <div class="trigger">
             <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
        </div>
    </div>
    <!-- </div>
<div  class="row">-->
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Text Here 4<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>Text Here 5<p></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>Text Here 6<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>Text Here 7<p></div>
        </div>
    </div>
</div>
<div class="row">
  <div class="trigger">
        <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
    </div>
    <div class="trigger large">
        <div tabindex="0" class="maincontent staticlarge"><div class="slider">
<img src="slide1.png" height="200" width="400" />
<img src="slide2.png" height="200" width="400" />
<img src="slide3.png" height="200" width="400" />
<img src="slide4.png" height="200" width="400" />
</div></div>
    </div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent static"><div class="slider2">
<img src="slide1.png" height="200" width="200" />
<img src="slide2.png" height="200" width="200" />
<img src="slide3.png" height="200" width="200" />
<img src="slide4.png" height="200" width="200" />
</div></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent staticlarge">
<iframe align="center" src="clock2.php" width="300px" height="200px" scrolling="no" frameBorder="0" style="margin-left:5px;"></iframe></div></div>

                </div>

  1. 然后，因为你有所有这些项目的固定宽度，所以很容易计算所有总宽度= 800px的宽度。

  2. 将其应用于外部容器，margin:0 auto;将会解决问题

    3. <强> CSS 

    .bodyCont{
    width :800px;
    margin:0px auto;
}

    DEMO

答案 1 :(得分：0)

简单地给第一个div（class="row"之前的那个）一个类（即wrapper）并插入以下css以将完整的包装内容置于屏幕中间：

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
}
相关问题
最新问题