Позиционирование вертикального центра

Question

Я хочу сосредоточить эти 4 изображения. Горизонтально он работает, но вертикально он не будет работать. Кто-нибудь знает, как решить эту проблему? На данный момент у меня есть черная секция заголовка/нижнего колонтитула с 4 изображениями, расположенными по горизонтали. Все масштабируемо, но не высота изображений.

Делайте это правильно?

HTML:

<section> 
    <div class="pic"> 
     <img src="img.png" alt="Pic" /> 
    </div> 
    <div class="pic"> 
     <img src="img.png" alt="Pic" /> 
    </div> 
    <div class="pic"> 
     <img src="img.png" alt="Pic" /> 
    </div> 
    <div class="pic"> 
     <img src="img.png" alt="Pic" /> 
    </div> 
</section> 

CSS:

body { 
    margin:0; 
    padding:0; 
    max-width: 100%; 
    max-height:100%; 
} 
section { 
    position:absolute; 
    top:5%; 
    bottom:5%; 
    left:0; 
    width:100%; 
    height:90%; 
} 
section img { 
    width:12.5%; 
    float:left; 
    margin-left:10%; 
} 

Answer 1

Я думаю, что его легче обернуть изображения в контейнере, а затем центрировать контейнер в родительском контейнере, в этом случае вы можете использовать тег статьи, чтобы обернуть изображения, а затем центрировать эту статью в разделе, подобном этому

HTML

<section> 
    <article> 
     <div class="pic"> 
      <img src="img.png" alt="Pic" /> 
     </div> 
     <div class="pic"> 
      <img src="img.png" alt="Pic" /> 
     </div> 
     <div class="pic"> 
      <img src="img.png" alt="Pic" /> 
     </div> 
     <div class="pic"> 
      <img src="img.png" alt="Pic" /> 
     </div> 
    </article> 
</section> 

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 

section { 
    top: 5%; 
    left: 0%; 
    width: 100%; 
    height: 90%; 

    /* strech */ 
    overflow: hidden; 
} 

article { 
    width:80%; 
    height:40%; /* change this to set height */ 

    /* CSS absolute center begin */ 
    border: 2px solid #0000ff; 
    margin: auto; 
    position: absolute; 
    display: inline-block; 

    top: 0; 
    bottom: 0; 
    left:0; 
    right:0; 
    /* CSS absolute center end*/ 
} 

.pic { 
    position: relative; 
    float: left; 
    width: 12.5%; 
    height: 100%; 
    margin-left: 10%; 
} 

.pic img{ 
    position: relative; 
    width:100%; 
    height:100%; 
} 

Надеется, что это поможет вам

Answer 2

Предполагая, что ширина изображения равна высоте изображения (как код, который вы дали есть), вы можете просто использовать margin-top из 50% - imageHeight , Это будет выглядеть

section img { 
    width:12.5%; 
    margin-top:32.5%; 
    float:left; 
    margin-left:10%; 
} 

Demo

Если это не так, вы можете использовать this pure CSS approach

Answer 3

Вы можете дать раздел position:relative;, а затем сделать трюк с изображениями.

Образец, приведенный ниже, делает их центрированными в разрезе, если вы хотите, чтобы изображения были развернуты, но вертикально выровнены, вам нужно сделать этот трюк на содержащем элементе (например, погружение вокруг изображений в разделе:

section { 
    position:relative; 
    top:5%; 
    bottom:5%; 
    left:0; 
    width:100%; 
    height:90%; 
} 
section img { 
    /*width:12.5%; 
    float:left; 
    margin-left:10%;*/ 
    position:absolute; 
    top:50%; 
    margin-top:-25%;/* should be half the height of the image */ 
    left:50%; 
    margin-left:-25%;/* should be half the width of the image */ 
}