Горизонтальное выравнивание по центру Div (расположение в сетке)

Я разработал макет сетки с использованием divs. Как вы можете видеть ниже. Однако мне нужно расположить их горизонтально по центру веб-браузера. Может кто-нибудь, пожалуйста, покажите мне, как? Все, что я пробовал, похоже, центрирует все элементы 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 ответа

Решение

Использовать 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. Тогда, поскольку у вас есть фиксированная ширина для всех этих элементов, становится легко вычислить ширину для всей общей ширины =800 пикселей.

  2. Примените его к внешнему контейнеру и margin:0 auto; сделает свое дело

CSS

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

DEMO

Источник

Просто дайте первый 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%); 
}
Источник
Другие вопросы по тегам