CODEWITHSUNDEEP
htmlcss
Maay
Maay

Reputation: 575

Gap in elements in a row

On my page I have lots of elements, which i need to show by several in a row in straight columns. Each element is an image of equal size. When you click in it, on it's place appears a menu with tree on a row icons. All elements should be centered horizontally and vertically. There could be a different number of big images (6, 7, 8 or more) and from 1 to 9 elements in icon menu. Block with icons should be the same size as block with image. Image is 300px in max width and height and icons are 100px in max width and height. Each element (icons or image) block should has 350px in max width and height with 3.5% padding. Now, I think I'm doing everything right, but elements logic on the page steel appears to be broken.

My codepen example

<div class="item">
          <div class="logo">
            <img src="http://i.imgur.com/HyOMQFC.png">
          </div>
        </div>
        <div class="item">
          <div class="links">
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
            <a href="#"><img src="http://i.imgur.com/wK9D1Ji.png"></a>
          </div>
        </div>
        <div class="item">
          <div class="logo">
            <img src="http://i.imgur.com/HyOMQFC.png">
          </div>
        </div>

css

.item {
  display: inline-block;
  max-width: 350px;
  max-height: 350px;
}

.logo,
.links {
  padding: 3.5% 3.5%;
  width: 100%;
  max-width: 300px;
  max-height: 300px;
  display: inline;
  margin: 3.5%;
}

.logo img {
  width: 100%;
  max-width: 300px;
    display: inline;
}

.links img {
  width: 33%;
  max-width: 100px;
  margin: 0px;
  padding: 0px;
    display: inline;
}

What I get enter image description here

What I need all cenetered up

Upvotes: 0

Views: 49

Answers (1)

whatever
whatever

Reputation: 342

You need to place the vertical-align:middle on items.

you also need to change the size because the target is bigger than the rest by changing the inline to inline-block to resize the items.

Upvotes: 1

Related Questions