Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover?

Below is my code snippet:

HTML:

<div class="nav-collapse">
  <i class="fa fa-bars fa-2x" id="bars"></i>
</div>

CSS:

.nav-collapse {
top: 30px;
right: 30px;
position: fixed;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: white;
z-index:200;
transition: width 0.2s, height 0.2s;

}

.nav-collapse i{
position: absolute;
color: #FFB361;
}

#bars {
margin-left: 11px;
margin-top: 9px;
}


.nav-collapse:hover {
    width: 60px;
    height: 60px;
}
javascriptjqueryhtmlcsscenter

Answer №1

Check out the results below

  • Include text-align: center and set line-height to 50px in the div

  • Delete absolute positioning from i

  • Get rid of the #bars style

  • For the hover state, add line-height: 60px as the height changes there

.nav-collapse {
top: 30px;
right: 30px;
position: fixed;
border-radius: 50%;
width: 50px;
height: 50px;
line-height:50px;
background-color: white;
z-index:200;
transition: line-height 2s, width 0.2s, height 0.2s;
text-align:center;
background:red;

}

.nav-collapse i{

color: #FFB361;
}




.nav-collapse:hover {
    width: 60px;
    height: 60px;
   line-height:60px;
}
<div class="nav-collapse">
  <i class="fa fa-bars fa-2x" id="bars">aa</i>
</div>

Answer №2

Instead of adjusting the width and height, try using transform: scale(1.4).

.nav-collapse {
  top: 30px;
  right: 30px;
  position: fixed;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: white;
  z-index: 200;
  transition:  transform 0.2s;
}
.nav-collapse i {
  position: absolute;
  color: #FFB361;
}
#bars {
  margin-left: 11px;
  margin-top: 9px;
}
.nav-collapse:hover {
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  cursor: pointer;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-collapse">
  <i class="fa fa-bars fa-2x" id="bars"></i>
</div>

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

Determining the scroll position of a JQuery Mobile collapsible set upon expansion

I am utilizing jQueryMobile (v1.4.0) collapsible set / accordions to showcase a list of elements along with their content, which can be seen in this jsFiddle. <div id="List" data-role="collapsible-set"> <div data-role="collapsible" data-conte ...

javascriptjquery-mobilemobilescrolljquery-mobile-collapsible

Inspecting the Ace Editor within the onbeforeunload event handler to confirm any modifications

I'm attempting to utilize the $(window).on('beforeunload', function(){}); and editor.session.getUndoManager().isClean(); functions within the ace editor to detect whether a user has made modifications to a document without clicking the submi ...

javascriptjqueryace-editoronbeforeunload

GitHub jQuery Page

Unable to display images based on user choice from the dropdown box, which is causing an issue after committing to GitHub website. There are no errors shown in the developer tool, but when hovering over the image link it says 'Could not load the imag ...

jquerygithub

Link a YAML file with interfaces in JavaScript

I'm currently learning JavaScript and need to convert a YAML file to an Interface in JavaScript. Here is an example of the YAML file: - provider_name: SEA-AD consortiumn_name: SEA-AD defaults: thumbnail Donors: - id: "https://portal.brain ...

javascriptnode.jstypescriptyaml

Ways to modify the header color of a card by utilizing a Select element in Javascript, while ensuring that it does not impact other cards

I am facing an issue with multiple cards, each containing a Select element. When a user selects an option from the Select element, the card header changes color, but it also affects all other card headers. How can I separate them? [data-background-co ...

javascripthtmlcssbootstrap-5

Preventing Div items from rearranging during size transitions using toggleClass

When I click on an element with the ID "id", I use toggleClass to resize a div from 10px to 500px in width. This is done partly to show/hide content. However, the issue arises when the transition occurs and the contents of the div start rearranging, overfl ...

javascriptjqueryhtmlcss

What could be the reason for my jQuery Bootstrap form not sending properly formatted JSON to the REST service?

I have incorporated Bootstrap and jQuery into my web page. Upon a button click, a modal dialog box appears with a simple form. When submitted, the form content is sent as JSON to my RESTful web service. Take a look at the modal dialog below... <!-- M ...

jqueryjsontwitter-bootstraprest

The destroy method of Chart.js does not appear to have any impact on the

Hello, I've come across this issue in my react app that I need help with: this.chart = new Chart(node, options); // adding data to the chart ... this.chart.destroy(); this.chart = null; this.chart = new Chart(node, options); // adding data to the cha ...

javascriptreactjschart.jschart.js2

Enable the option to deactivate specific dates in the datepicker function

In my Laravel application, I have an online appointment form that includes a "Select Doctor" field and a "datepicker." For example, if doctor "A" is available at the clinic on Saturday, Monday, and Wednesday, while doctor "B" is available on Sunday, Tuesd ...

phpjquerylaravellaravel-5datepicker

Obtaining a result from a Promise in AngularJS

Here is a snippet of an Angular JS Service that I have: 'use strict'; app.factory('loggedService', ['$http', 'authService', 'customerService', function ($http, authService, customerService) { var out = ...

javascriptangularjsangularjs-scope

Unforeseen issues arise when using material ui's Select component in conjunction with 'redux-form'

I am encountering an issue with a 'redux form' that includes a Select component from the latest material-ui-next. import { TextField } from 'material-ui'; <Field name="name" component={TextField} select > <MenuIte ...

javascriptreactjsdrop-down-menumaterial-uiredux-form

When the ajax response comes in, my javascript code seems to suddenly stop

After sending a POST request, my JavaScript suddenly stops working for some unknown reason. Here's the situation: I visit my webpage, fill out the form, and then click 'Click me' : Upon clicking OK in the alert popup, I see the expected ou ...

javascriptcssajax

Vue js homepage footer design

I am struggling to add a footer to my Vue.js project homepage. Being an inexperienced beginner in Vue, I am finding it difficult to make it work. Here is where I need to add the footer Below is my footer component: <template> <footer> </ ...

javascriptvue.jsfooter

Unable to import a Module in React without curly braces, even when using 'export default'

I recently stumbled upon a question regarding module imports in React. Some sources mentioned that using curly braces around imports can increase the bundle size by importing the entire library. However, I had been successfully importing modules without cu ...

javascriptreactjsimport

Symfony Form Validation through Ajax Request

Seeking a way to store form data with Symfony using an Ajax call to prevent browser refreshing. Additionally, I require the ability to retrieve and display field errors in response to the Ajax call without refreshing the page. I have a Symfony form setup ...

javascriptphpjqueryajaxsymfony

Autofocus Styling with CSS Bootstrap

Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...

cssreactjsbootstrap-4

What is the best way to obtain clear HTTP request data in a component?

My service retrieves JSON data from the backend: constructor(private http: Http) { }; getUsers(): Observable<any> { return this.http.get('http://127.0.0.1:8000/app_todo2/users_list'); }; In the component, this data is processed: ng ...

javascriptjsonangulartypescriptrxjs

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

css

``There seems to be an issue with the alignment of items in the

I am fairly new to using css and bootstrap and I am currently working on integrating a carousel into my angular web app. I copied the code from the bootstrap site but I am facing challenges in aligning everything properly. Additionally, the image slides do ...

cssbootstrap-4carouselangular-ui-bootstrapbootstrap-carousel

A guide to implementing Vuex in a Laravel and Vue 3 project

Currently, I am working on a Laravel + Vue 3 project and need to incorporate Vuex into the project. In my store.js file, I have configured my Vuex as shown below: import { createApp } from 'vue' import { createStore } from 'vuex' const ...

javascriptlaravelvue.jsvuex