Tips for keeping an icon aligned in the middle of a responsive square container

Currently, I am facing an issue with a div element that is supposed to be a square and remain so regardless of the device being used. My challenge lies in centering a FontAwesome icon within this square across all screen sizes. Despite my efforts, the desired result has not been achieved.

On desktop, the icon appears horizontally and vertically centered, as shown below:

https://i.sstatic.net/S4JcH.png

However, on mobile devices, the icon is no longer perfectly centered, leading to the following appearance:

https://i.sstatic.net/bKRdB.png

I am seeking a solution that does not involve using media queries. You can view the code and experiment further on my Codepen.

htmlcssbootstrap-4font-awesome

Answer №1

The positioning of the icon appears off-center due to a couple of factors:

Instead of resizing the actual vector graphic itself, you are adjusting the size of its container (<i>). This results in the graphic shifting towards the right as the container size decreases.

Font Awesome utilizes unicode characters for icon display, essentially treating them as text elements. To properly resize the graphic, you can apply the following CSS (e.g., setting the font-size to 2em):

.add-img-button::before {
  font-size: 2em;
}

To center the anchor point of an element and position it accordingly using left: 50%, top: 50%, you can utilize the transform: translate(-50%, -50%) option:

.add-img-button {
  color: #8abe57;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}

Answer №2

.img-holder {
  width: 240px;
  height: 240px;
  border: 2px dotted #8abe57;
  border-radius: 0.25rem;
  display: flex;
}

.img-holder i {
  margin: auto;
  font-size: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<div class="img-holder">
  <i class="fas fa-camera add-img-button"></i>
</div>

Answer №3

To make your .add-img-button centered, simply modify it as follows:

.add-img-button {
    color: #8abe57;
    position: absolute;
    /* width: 10%; */
    height: auto;
    display: inline-block;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    font-size: 1.5em;
}

Once you remove the predefined width, you can center the button accurately by using top and right (or left), then apply transform translate to adjust it to the object's center.

Check out this pen for reference!

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

Creating a pattern for validation that inserts a decimal point between numerical values entered

Is it possible to create an input field that automatically places a decimal point after the second character? For example, when a user enters 4, it would display as 4.11. I have tried using jQuery validation with patterns, but I can't seem to figure o ...

phpjqueryhtmlvalidation

Troubles with showcasing icons on a website

I need some help with a minor issue that I'm stuck on. I'm trying to display an information icon that, when clicked, opens a pdf. The strange thing is that the icon doesn't show up on the page even though it exists on the server. However, wh ...

javascripthtmljsp

How can HTML be assigned to a PHP variable without losing its formatting?

My goal is to store HTML in a variable in PHP to help with modularizing my code. $html_block1 = "<div class='item'> <img src='chicago.jpg' alt='Chicago'> <div class='carousel-caption&ap ...

phphtmlvariablesmarkup

Dealing with Sideways Overflow Using slideDown() and slideUp()

Attempting to use slideUp() and slideDown() for an animated reveal of page elements, I encountered difficulty when dealing with a relatively positioned icon placed outside the element. During these animations, overflow is set to hidden, resulting in my ico ...

javascriptjqueryhtmlcss

When the parent div contains at least four divs, show the scroll arrow containers

In my code, there is a parent div that holds multiple child divs. If the number of child divs within the parent div exceeds 4, I want to show the scroll arrow containers. If it's less than 4, then those arrow containers should not be displayed. The ...

javascripthtml

Is there a way to disable the feature of saving input values?

I am dealing with an input field that looks like this: <input name="username" placeholder="Email" type="email" autocomplete="off" /> Even though I have set the autocomplete attribute to off, the previous value still appears when I open the page: h ...

htmlcssinputbrowser-cache

Fade in and out of page or div elements with a simple click

I've been dedicating some time to my recruitment website lately. As a beginner in coding, I'm looking for a script that will automatically fade out the Employment review content when clicking on each employment vacancy div and then fade back in w ...

javascriptjqueryhtmlcss

JavaScript and modifying color using hexadecimal color codes

Being a novice in front-end development, I embarked on a project using JavaScript that would alter the color of a div based on environmental parameters such as temperature and pressure. My initial idea involved creating buttons to adjust the temperature - ...

javascripthtmlcss

Having trouble accessing an element using jQuery(idOfElement) with a variable as the name parameter

Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...

javascriptjqueryhtml

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

Rely on the content to establish the width, rather than the parent element

My elements include the following: .nav { width: 100%; background: red; display: flex; } .parent { background: blue; flex-grow: 1 } .child { background: yellow; } <div class="nav."> <div class="parent"> <div class="chi ...

htmlcss

I'm having trouble grasping the concept of margin collapse in this particular example

It's clear why the margin collapses to 20px in the first example when there's a border on the outer div. However, it is puzzling how the margin collapses to zero in the second example just by removing the border from the outer div. /*First exam ...

htmlcss

"Adjusting the background color based on the current day using PHP and CSS

Check out the screenshot of my result here. I'm currently experiencing an issue with the code while trying to modify a calendar. The error seems to be originating from tablerow.php, as I've indicated in the comments. I am attempting to change the ...

phphtmlcss

Non-sticky hamburger menu is not fixed in place

Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn&apos ...

javascripthtmlcss

AJAX Post Request Function without Form That Does Not Reset

I am currently struggling with understanding the Ajax POST method. I am attempting to make an API request, and since the response has similar parameters, I decided to create a global function that can be used by other HTML/JS pages. However, I am aware tha ...

javascripthtmljqueryajax

Changing the input value in Nuxt / Vue 2 after it has been overridden

I'm working on a feature where the user's typed keys are converted to the last single upper-cased character (for example, 'a' becomes 'A', 'abc' becomes 'C'). Here is my current code snippet: <template& ...

htmlvue.jsinputnuxt.js

Spacing between letters on a canvas element

This question is straightforward - I am struggling to find a way to adjust the letter spacing when drawing text on a canvas element. I want to achieve a similar effect as the CSS letter-spacing attribute, by increasing the space between each letter in the ...

javascriptcsshtmlcanvasletter-spacing

A guide on creating a horizontal card body layout for small screens using Bootstrap 4

Is there a way to make cards horizontal in small (mobile) screens using Bootstrap 4? For example, displaying the card vertically on desktop/larger screens and horizontally on mobile/smaller screens like the image below: https://i.sstatic.net/4IcF2.png & ...

htmltwitter-bootstrapcssbootstrap-4

Delicate seams break up the different sections of the webpage

I'm facing an issue with my website where thin lines are appearing between each section when previewed in Safari and Chrome, but not in Firefox (as shown in the images). I've checked the CSS code for each section in Dreamweaver, where the lines d ...

htmlcss

Adjust the color of the IText element on a Fabric.JS canvas (utilizing React and typescript)

I have an input with the type=color attribute positioned outside of a Canvas. Inside the canvas, there are one or more IText objects along with other elements. My goal is to "change the color of selected text objects when the input value changes". Incorpo ...

htmltypescriptcanvasfabricjs