centering icon according to div and putting space between divs

Question

I am kinda new to web design issues (html, css etc) and trying to make something like this:

I don't know how to make that fa-envelope-o icon centered both horizontally and vertically. I tried something like this:

#envelopeDiv{
    background-color: red;
    width:62px;
    height:42px;
    line-height:42px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
}

#disableAllDiv .big-icon{
    font-size: 25px;
    line-height: inherit;
}

#disableAllDiv{
    background-color: #4caf50;
}

#disableAllButton{
    margin-top: 10px;
    margin-bottom: 10px;
}

It didn't give me the correct result. Can anyone provide sample code or more professional approach? Even "how to research" would be very useful.

Please include the HTML, as well. Also, a working demo (with images or placeholders) would be helpful (e.g., jsfiddle.net). — Michael Benjamin, Dec 05 '15 at 15:26
But for a general centering solution (both vertical and horizontal), [**flexbox**](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is the most modern technique: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Dec 05 '15 at 15:28
@Michael_B, thank you. I will try flexbox and return shortly. — kalahari, Dec 05 '15 at 15:32

score 0 · Accepted Answer · answered Dec 05 '15 at 15:35

As @Michael_B said in his comment above, flexbox is probably the most modern way to go about this.

The horizontal centering is easily done with margin: auto, but the vertical-align is more difficult, so I'll post a non-CSS approach.

However, I (with my weird own ways) like to go about this straightforwardly with JS (and jQuery): center it with absolute positioning by setting its left and top to half the width and height (respectively) of the container minus half the width and height of the image, dynamically.

$("img").css({
  "top": $("div").height() / 2 - $("img").height() / 2,
  "left": $("div").width() / 2 - $("img").width() / 2,
 "position": "absolute"
});

div {
  width: 500px;
  height: 500px;
  background-color: #aaf;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://images.clipartpanda.com/envelope-with-letter-clipart-envelope-md.png" />
</div>

See a working example on JSFiddle.net.

EDIT

Now that I think about it, if you know what the height and width of your container and image is going to be, then this will be easy by just setting a certain padding to the container.

See this example on JSFiddle.net.

centering icon according to div and putting space between divs

1 Answers1