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: https://i.sstatic.net/Dy5F3.png

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.

htmlcss

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Webkit browsers do not properly clip content with rounded corners when using position:relative

In webkit browsers like Chrome, rounded corners do not properly cut off content when using position:relative; Check out this demonstration. Here is the HTML: <div class="outer"> <div class="inner"> </div> <div> And here ...

htmlcsswebkitrounded-corners

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

Currently, I am working with two parent flex items, arranged with flex-direction: column. Within the first parent, there are two children. However, one of the children is optional and may be removed at times. I aim to have the optional child displayed on ...

javascripthtmlcssflexbox

There is a significant distance between the columns, causing the text to appear misaligned and not left-

I'm encountering an issue with the alignment of a row with two columns. The first column contains an image, and the second column contains text. However, the text is not aligning properly next to the image. <link href="https://cdn.jsdelivr.net/ ...

htmlbootstrap-5

Creating a dynamic columns property for Mat-Grid-List

Is it possible to create a Mat-Grid-List where the number of columns can be dynamically changed based on the width of the container? Here is an example: <mat-grid-list [cols]="getAttachmentColumns()" rowHeight="100px" style="width: 100%;"> <mat ...

htmlangulartypescriptangular-material

Having difficulties redirecting with the button's onclick function

I'm struggling to redirect users to another page using a button (assuming the hostname is localhost:8000) $('#getFruit').attr('onclick', window.location.host + '/getFruit/banana') <script src="https://cdnjs.cloudfl ...

javascripthtml

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

An HTML form featuring two unique submit style buttons designed for triggering two separate PHP actions or files

I'm facing a challenge with my HTML file upload form that sends files to a database using PHP. The current setup allows users to upload a file, preview the data in an HTML table, and then submit it to the database. However, I need to merge the preview ...

phphtmlsqlpost

Tips for inserting the <a> HTML tag into a JSON array object

I am relatively new to creating array objects and I am unsure on how to add a link within a <a> tag in a JSON file. Here is the JSON object code: powerUpList: [ { id: 8, name: 'Automate your API column type ', description: & ...

javascripthtmljquerynode.jsejs

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

javascriptjqueryhtmlcss

HTML filtering using the <select> element

Is there a way to implement this script for options instead of buttons? The goal is to filter the HTML section, but it seems to not work with <option> tags. Instead of displaying the all class, it shows nothing. CSS .show { display: block; } .filt ...

javascripthtmlcssbootstrap-5

Error message: "Angular.js encountered a typeError stating that V2.example is not a function"

Having recently started learning Angular.js, I came across a tutorial that was created about a year ago. In this tutorial, I am attempting to implement a search feature that takes user input and searches for it on Github.com. Below is the HTML code snippet ...

htmlangularjs

I am in the process of creating several checkboxes and am looking to incorporate some added functionality

Currently, I am working on a project that involves creating multiple checkboxes. My goal is to implement a specific functionality where only one checkbox can be checked in each group with the correct or incorrect value. Once all groups have been selected, ...

javascriptjquerycssarrayshtml

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

htmlcss

Guide on emphasizing a div when the page's validity is not true

Is there a way to highlight a specific div when the page.isvalid=false? I can display the error message on page load, but struggling to highlight the required control. I have a JavaScript function that applies an error class to the div, which works fine w ...

javascriptjquerycss

List formatted in a table

Can a list be inserted into a table using markdown? I attempted to research this but came up empty-handed. An example of a Table: Fruit |Color ---------|---------- Apples |Red Pears |Green and an example of a list: List item 1 List item 2 ...

htmlmarkdown

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

javascriptcssreactjsmaterial-ui

Designing personalized sass components

Seeking advice on developing a custom CSS unit that can be utilized in Sass with Node.js. Is there a tutorial available for creating a Sass plugin specifically for this purpose? For instance, I am looking to establish a unit called "dpx" which functions as ...

cssnode.jswebpacksass

conceal elements created with JQuery within an AJAX function

Is it possible to use jQuery and the $.ajax() method to submit a form, displaying only the result while hiding other elements on the page? I am looking to add a conditional in the Ajax method that will show the result if successful, hiding certain elements ...

phpjqueryhtmlcssajax

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

css

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser