Aligning the icon within the div and adding a gap between each div

Question

Aligning the icon within the div and adding a gap between each div

I'm fairly new to web design, specifically dealing with html and css, and I'm attempting to create something similar to the design in the following image:

My struggle lies in centering the fa-envelope-o icon both horizontally and vertically. I've tried the following code:

#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;
}

Unfortunately, this code didn't yield the desired outcome. Could anyone offer sample code or a more professional approach? Even tips on how to research would be greatly appreciated.

html css

Answer 1

Answer №1

As stated by @Michael_B in the previous comment, utilizing flexbox is considered a contemporary approach to address this issue.

While horizontal centering can be achieved easily with margin: auto, vertical alignment proves to be more challenging. As an alternative to CSS, I will suggest a non-CSS method.

Personally, I prefer a direct JavaScript (and jQuery) solution for achieving this, using absolute positioning and dynamically adjusting the top and left properties to half the dimensions of the container minus half of the image's dimensions.

$("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>

For a demonstration, you can view a live example on JSFiddle.net.

UPDATE

Upon reflection, if you have predetermined the dimensions of your container and image, achieving the desired outcome becomes simpler by applying specific padding to the container.

Take a look at this illustrative example on JSFiddle.net.

Answer 2

As stated by @Michael_B in the previous comment, utilizing flexbox is considered a contemporary approach to address this issue.

While horizontal centering can be achieved easily with margin: auto, vertical alignment proves to be more challenging. As an alternative to CSS, I will suggest a non-CSS method.

Personally, I prefer a direct JavaScript (and jQuery) solution for achieving this, using absolute positioning and dynamically adjusting the top and left properties to half the dimensions of the container minus half of the image's dimensions.

$("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>

For a demonstration, you can view a live example on JSFiddle.net.

UPDATE

Upon reflection, if you have predetermined the dimensions of your container and image, achieving the desired outcome becomes simpler by applying specific padding to the container.

Take a look at this illustrative example on JSFiddle.net.

Aligning the icon within the div and adding a gap between each div

Answer №1

Similar questions

What is the best approach to creating a fully rounded capsule using CSS?

Stopping the WordPress gallery at the end without looping using Elementor

How can I ensure that the size of the Dropdown Menu Item matches its parent in both Bootstrap and CSS styles?

Creating Eye-Catching Images by Incorporating Image Overlays Using Just One Image

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

Instructions on transforming a XAML grid in WPF into a JSON array

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

Div element obstructing the ability to view markers

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

What is the reason behind this HTML/CSS/jQuery code functioning exclusively in CodePen?

Switching CSS styles - seeking a smoother integration

Implementing jQuery form.js to dynamically update image src upon success

Learn the process of sending information to a MySQL table using a select tag in PHP

My live website is plagued by an annoying horizontal scroll bar that doesn't appear in the local host version

Issue encountered while trying to play sound on PhoneGap

Manually adjusting the aria-expanded attribute to "true" does not result in opening a new tab

Use PHP to highlight the row that has been selected in an HTML table

Manipulating SVG filter attributes with CSS: A comprehensive guide

Improving Vue Component on Navigation