The alignment of the icon to the center of a div is disrupted when using bootstrap.css

Take a look at this code

To center the icon within a div, I am using the following code:

<div class="webview-back icon"
     style="width: 34px; height: 34px; display: inline-block; text-align: center; background-color: lightgray;"><i
    class="fa fa-arrow-left" style="vertical-align: middle;"></i>
</div>

It should look like this: https://i.sstatic.net/KAFAh.png

However, when I include 

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
, the icon aligns to the top.

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

I would prefer not to use bootstrap's .btn. Is there a way to keep the icon centered within the div even when including bootstrap.css?

htmlcsstwitter-bootstrap

Answer №1

I prefer utilizing CSS classes over inline styles like style="", but if you need to use it that way, then it's fine.

You could experiment with the line-height property, such as setting it to 34px:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="webview-back icon"
style="line-height: 34px; width: 34px; height: 34px; display: inline-block; text-align: center; background-color: lightgray;"><i
    class="fa fa-arrow-left" style="vertical-align: middle;"></i>
</div>

Answer №2

Flexbox is truly a work of art

I've separated your HTML and CSS to make it more readable.

I've included these 3 lines

display: inline-flex;
align-items: center;
justify-content: center;
  • The first line sets the display mode to inline (externally) and flex (internally)
  • The second line vertically aligns the contents in the center
  • The third line horizontally aligns the contents in the center

.webview-back.icon {
  width: 34px;
  height: 34px;
  background-color: lightgray;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="webview-back icon">
  <i class="fa fa-arrow-left"></i>
</div>

I trust you will find this information beneficial

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

Using a Python class instance as a parameter in a Bottle template

Here is how my class is structured: class Person: def __init__(name=None, id_=None): self.name = name self.id_ = id_ # The current way I am handling it is as follows. The member object is of type Person. return template('index.html&apo ...

pythonhtmlbottle

Learn how to implement an HTML button that triggers your JavaScript function and shows the output of the code, generating a random token

Currently, I am in the process of creating an HTML page with a form that allows users to send email invitations to join a website. One of my requirements is to have a random token generated and displayed to the user before they submit the invitation. To ac ...

javascripthtmlforms

Stack three DIVs vertically on the entire screen with a fixed page margin, ensuring no need for a scroll bar

I need help creating a layout with 3 DIVs stacked vertically, each taking up one third of the screen without causing a scroll-bar to appear. I also want an 8px margin around all three of them. Here's an image for reference... example image Ultimatel ...

htmlcssfrontendweb-deployment

Validating textfields and dropdowns for dynamic HTML identifiers using jQuery

I am attempting to validate a dropdown and text field together. Both fields can either be left empty or both must be filled. The HTML ids are generated dynamically. I have tried the code below but it is not working as expected. Here are the resources I use ...

jqueryhtmlangularjs

What is the method for implementing a dropdown box with select and non-select checkboxes, similar to the example shown in the image, using AngularJS?

https://i.sstatic.net/CTx8K.jpg I am seeking assistance in incorporating the image below into a dropdown menu using angularjs ...

htmlangularjs

"There seems to be an issue with the KeyListener function in

The error I'm encountering is: index.html:12 Uncaught TypeError: Cannot read property 'addEventListener' of null I'm unsure about what went wrong. The intention behind the code was to store the result of the selected radio button into a ...

javascripthtml

The appearance of the Rails view changes noticeably once it is deployed on a remote server

Within my Rails application, I have noticed a discrepancy in the appearance of my views depending on the location where it is accessed. When running on localhost, the view displays as expected: https://i.sstatic.net/TrReR.png However, when the app is acce ...

cssruby-on-railsasset-pipeline

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss

Is the div height set to 100% until the content surpasses the height of the browser window

Is there a method to make a div fill 100% of the available page height, until it contains enough content to require a scrollbar? // For example, if the browser height is 600px: <div> // Initially empty, so it will be 600px tall. </div> . ...

htmlcss

Show Text When Clicking Within Separate DIVs

I have a set of three divs. One contains a Twitter icon, another holds a LinkedIn icon, and the last one is designated for displaying text upon clicking. My goal is to click on the Twitter icon and have corresponding text appear in the third div. Then, if ...

javascriptjquerycss

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

What is the best way to integrate Bootstrap CSS and JS into a ReactJS application?

Just starting out with ReactJS and looking to integrate bootstrap into my React app. Successfully installed bootstrap using npm install bootstrap --save Now, figuring out the steps to load bootstrap CSS and JS in my React app while using webpack. webpac ...

twitter-bootstrapreactjswebpack

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

jqueryhtmlcss

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...

jqueryhtmlformsjquery-mobile

What is the best way to create an adaptive <pre> tag for ASCII art without using media queries?

Currently, my username is displayed as an ASCII art banner/header and I am looking to enhance its responsiveness. Instead of relying solely on media queries, I am exploring the possibility of making it scale within a CSS grid container. This approach would ...

htmlcsscss-grid

Modify the background color of a div when it contains a particular string of text

https://i.sstatic.net/Ab5S9.png Looking for assistance with a basic jQuery script that can search for a specific text string. If the text is found, I want to change the CSS of the containing div. The HTML+CSS+JS code would be like: $(".ng-cell .ngCell ...

javascriptjqueryhtmlcss

Problems with Bootstrap affix scrolling in Internet Explorer and Firefox

I'm encountering an issue with the sidebar on my website. I've implemented Bootstrap affix to keep it fixed until the end of the page, where it should move up along with the rest of the content at a specific point... Everything seems to be worki ...

javascriptjquerycsstwitter-bootstrapaffix

Incorporating a hyperlink to a 'submit' button within an HTML document

I'm looking for a solution to my submit method issue. Here's the code snippet: <tr><td><input type = "submit" value='Register'</td></tr> I also want to attach this link: <a href="something.html">Clic ...

html

Uploading a file to a server using HTML and PHP: a step-by-step guide

Looking to utilize PHP as a proxy for uploading files to a server. Any advice on how I can send the uploaded files along with a Basic Authorization header? ...

phphtml

Fluidly adjust text field and label fields in forms

I came across a code snippet that allows for dynamically adding form text fields. However, I needed to ensure that each text field has a corresponding label which increments by one every time a new field is added. While I have successfully added the labels ...

javascriptjqueryhtml