Centered Font Awesome icon in the vertical position

Struggling to create a versatile box with delete and edit buttons integrated within. Despite numerous attempts, the horizontal alignment of the icons remains elusive.

.inputBox .content {
  flex: 2;
}

.inputBox .icon {
  flex: 1;
  max-width: 50px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
  <div class="inputBox d-flex">
    <div class="bg-dark text-white rounded-left p-2 content align-middle">
      <input name="text" placeholder="This is a test" />
      <span>Link text</span>
      <br /> test<br />
    </div>
    <a href="#" class="bg-info text-white p-2 icon">
      <i class="fa fa-edit fa-lg"></i>
    </a>
    <a href="#" class="bg-danger text-white p-2 icon rounded-right">
      <span>
        <i class="fa fa-trash fa-lg"></i>
    </span>
    </a>
  </div>
</div>

htmlcsstwitter-bootstrap-4

Answer №1

Implement display:flex, align-items:center, justify-content:center within the .icon class...

...alternatively, utilize the predefined Bootstrap classes 

d-flex align-items-center justify-content-center
within the .icon

Code Snippet

.inputBox .content {
  flex: 2;
}

.inputBox .icon {
  flex: 1;
  max-width: 50px;
  display: 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" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
  <div class="inputBox d-flex">
    <div class="bg-dark text-white rounded-left p-2 content align-middle">
      <input name="text" placeholder="This is a test" />
      <span>Link text</span>
      <br /> test<br />
    </div>
    <a href="#" class="bg-info text-white p-2 icon">
      <i class="fa fa-edit fa-lg"></i>
    </a>
    <a href="#" class="bg-danger text-white p-2 icon rounded-right">
      <span>
        <i class="fa fa-trash fa-lg"></i>
    </span>
    </a>
  </div>
</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

The custom classes I have created in Material UI are being overshadowed by the default classes provided by Material UI

I am trying to change the color of a TextField label to black when it is focused. I used classes in InputProps with a variable, but unfortunately, the default styling of material UI is taking precedence in chrome dev tools. Below is the code snippet. Pleas ...

javascripthtmlcssreactjsmaterial-ui

Display content from two URLs in separate frames on a single HTML webpage

While the concept seems simple, I have never attempted it myself. Here is the code I tried: <html> <frameset cols="30%,70%"> <frame src="www.google.com" name="frame1"> <frame src="www.yahoo.com" name="frame2"> </frameset ...

htmlframes

Transitioning with CSS Scale may result in uneven edges

My current struggle lies with a preloader I designed. It features a simple mask effect that appears as follows: (function() { 'use strict'; setTimeout(function() { document.body.className = 'loaded'; }, 3000); })(); #loade ...

htmlcss

Guide to incorporating CSS styles into DataPager

Seeking guidance on customizing a ListView with a DataPager control. Currently using a plain numeric based layout, wondering if I can apply CSS styles to the numbers like adding a 1px solid border around each number. Any suggestions or tips would be highl ...

asp.netcss

Trouble with updating data in Angular 8 table

In Angular 8, I have created a table using angular material and AWS Lambda as the backend. The table includes a multi-select dropdown where users can choose values and click on a "Generate" button to add a new row with a timestamp and selected values displ ...

htmlangulartypescriptangular8

Guide on retrieving data from two separate tables within a single database using PHP

I am currently working on a shopping website where I have a table called "products" that stores all the product data. Additionally, there is a separate table named "cart" which contains the products added to the cart, including product ID and user ID. On t ...

phpmysqldatabasehtml

Apply borders to inline-block elements uniformly

Click here for the code snippet Can anyone suggest a solution to adding borders to inline-block divs in a way that avoids repetition and ensures equal border width on each side of the box? I am trying to create a calendar layout. #parent{ width: 400p ...

htmlcss

How come my button tag doesn't align in the center like the other input tags do?

Are you struggling to create a search box using HTML and CSS with both the text input tag and button input tag centered within it? It seems like the CSS code is not applying properly to the button tag, unlike the other tag. * { margin: 0; padding: ...

htmlcss

Property-based Angular Material row grouping in a mat-table is a powerful feature that enhances

Is there a way to organize the data in one row with the same ID? Currently, my data looks like this: Data Set: { "id": "700", "desc": "Tempo", "richiesta": "20220087", "dataElab": &quo ...

javascripthtmlangularangular-material-table

Incorporating a visually stunning backdrop to a website

Just wanted to mention that I am not very proficient in HTML, CSS, and other web development techniques. However, because I needed a portfolio website to showcase my projects, I followed an online tutorial and essentially copied and modified it to suit my ...

htmlcsssass

Import CSS and JavaScript files from the Assets directory

After hours of searching for a solution, I've come to realize that my situation is somewhat unique. I have a website loaded into a webview in an Android app. setContentView(R.layout.activity_main); WebView myWebView = (WebView) findViewById(w ...

androidhtml

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

My code snippet in the HTML file contains Javascript: <script> $(document).ready(function(){ $("#sub").click(function(){ var user_issue = $("#issue").val(); ...

javascriptjqueryhtmlajax

When a button is clicked, the event is not triggered within a FirefoxOS application

Despite functioning perfectly on Firefox for desktop, my application encounters issues when tested on my ZTE Open C (Firefox OS 1.3). Pressing the button does not trigger any action, while onmouseup and onclick events work flawlessly. Even attempts to bin ...

javascriptjqueryhtmlfirefox-os

A combination of fixed width column and dynamic content area in Bootstrap design

Is there a way to achieve the combination of fixed and fluid width columns using Twitter Bootstrap alone, similar to this example? The HTML and CSS in the example make it seem simple. But can this be done solely with Bootstrap? ...

csstwitter-bootstrap

When the button is clicked in Jquery, the HTML is loaded into one div while simultaneously hiding the other div

Looking for some assistance with JQuery, as I am relatively new to it. In my project, I have three divs set up - the first serving as the header, the second containing a slideshow of images along with buttons, and the third that should be displayed upon bu ...

jqueryhtmlcssbootstrap-4

Is there another solution besides setting body {overflow:scroll;} to prevent page shaking or moving?

After spending a good half hour tearing my hair out trying to figure out why my webpage was shifting by a few pixels when navigating between pages, I finally discovered the culprit - the appearance of the right scroll bar on longer pages was causing the sh ...

cssscrollbar

Creating an Image Link within Nivo Slider

I have been trying to figure out how to make an image a link in NivoSlider. I know that I can use captions to create a link, but I want the actual image to be clickable for better accessibility. I found a similar question on StackOverflow, but it was rela ...

javascriptjqueryhtmlcssnivo-slider

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium

"Angular File Upload Made Easy with Drag-and-Drop Functionality and Cleverly Positioned

Encountering an issue with Angular File upload in conjunction with relatively positioned elements. The drop target is set to 100% width and height, absolutely positioned. While dragging a file over any non-relatively positioned element, the overlay functio ...

javascripthtmlcssangularjsangular-file-upload

Using jQuery to trigger animations on position and size changes with onmouseenter and onmouseleave

After discovering that jQuery's onmouseenter/onmouseleave event is triggered every time the element's position/size changes during animation, I implemented a simple validation with if (img$.is(':animated')) return false; at the start of ...

javascriptjqueryhtmlcss