Tips for vertically centering a span within a div that is floated to the right

Need help centering a span vertically within a div when using float:right?

<div class="card">
  <div class="card-header">
    <h5>TEST</h5>
    <span class="fa fa-info"></span>
  </div>
  <div class="card-body">
    <div class="card-text">
      TEXT<br />
      TEXT<br />
      TEXT<br />
      TEXT<br />
    </div>
  </div>
</div>

.card {
  width: 200px;  
}

.card-header h5 {
  display: inline;
}

.card-header span {
  float: right;
}

In the current setup, the fa icon in span is aligned to the top. How can I make it vertically centered?

Check out the jsfiddle for more details: http://jsfiddle.net/zj3cubtd/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilizing flexbox in this scenario is highly recommended. Simply incorporate the following CSS code to achieve the desired outcome:

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-container h4 {
  margin: 0; /* No need for 'display: inline'. Remove the margin instead */
}

Answer №2

Hopefully this solution will do the trick.

.card {
  width: 200px;  
}

.card-header h5 {
  display: inline;
}

.card-header span {
  float: right;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
<div class="card">
  <div class="card-header>
    <h5>TEST</h5>
    <span class="fa fa-info"></span>
  </div>
  <div class="card-body">
    <div class="card-text">
      TEXT<br />
      TEXT<br />
      TEXT<br />
      TEXT<br />
    </div>
  </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

spacing between elements vertically

             I am struggling with a common issue and despite searching, I have not been able to find a solution that works for me. Here is my setup: <div id="wrapper">   <div class="content-area-top"></div>   <div clas ...

htmlcss

Changing the color of placeholder text with CSS on Squarespace

I'm having a tough time figuring out how to adjust the color of the placeholder text in my form fields. Despite being able to change the background color of the form fields, I can't seem to alter the text color. The placeholder text doesn' ...

cssformssquarespace

What is the best method for choosing the next item with jQuery?

I am facing an issue while trying to apply some design on the next element. The error message that I am encountering is: Error: Syntax error, unrecognized expression: [object Object] > label Below are my selections for browsing by category: BROWSE BY ...

javascriptjquerycss

Eliminate the character """ from the HTML code

Is there a way to remove the "|" between each "a" tag below using CSS, Javascript, or jQuery since I don't have access to edit the HTML directly? <span class="reportnavigation"> <span class="reportnavigationheader"> Go To Week ...

javascriptjqueryhtmlcss

What is the best way to synchronize loading dynamic data with static content while loading an HTML document?

When I visit a web page that contains both static and dynamic text (using AngularJS), I notice that the static data loads first, followed by the dynamic data after a few seconds. This causes a noticeable change in the alignment of the text. Code Sample: ...

htmlangularjsdynamic

The challenge of overlapping elements in jQuery UI resizable

Encountering an issue with the resizable class in jQuery UI (http://jqueryui.com/resizable/). When resizing begins, all divs below move to overlap with the resizing div. Upon inspecting the js console in chrome, it appears that resizable applies inline sty ...

javascripthtmlcssjquery-uijquery-ui-resizable

When utilizing data-ng-view, AngularJS struggles to locate the corresponding HTML content

I am currently working on building an application using AngularJS, MVC, and API. Below you can find the code for my AngularJS module and controller: //home-index.js var myApp = angular.module('myApp', []); myApp.config([function ($routeProvider) ...

javascripthtmlangularjsasp.net-mvc

Instant feedback from dynamically generated text boxes

As a Python developer, I am venturing into the realm of HTML. Currently, I am working on an internal tool that enables users to create directories for various projects. To achieve this, I have implemented a method for dynamically adding and removing text b ...

jqueryhtmlangularjs

Unable to fix the unhandled reference error

https://i.sstatic.net/cJdyl.jpgI'm currently working on a website design and running into an issue with the 'draw_images' function being referenced as undefined, even though I have already defined it. I suspect this error may be due to scopi ...

javascriptjqueryhtmlweb

Creating three select tags using PHP and Ajax

Today is my first experience with AJAX, and it's actually easier than I had imagined. I created a select tag that opens another select tag and it works perfectly. Here is the code... test.php <?php require'models/category.php'; $object= ...

phphtmlajax

What are two ways to tell them apart?

<?php if($_SERVER["REQUEST_METHOD"] == "POST") { } ?> <form action = "" method = "post"> <label>Name of vegetable</label><br> <input type = "text" name = "vegetable" class = "box" placeholder="Enter Ve ...

phphtml

Exploring the use of React material-ui Drawer list to render various components onClick in your application

Working on designing a Dashboard with the React material-ui package involves implementing an App bar and a Drawer containing a List of various items. The objective is to render the corresponding component inside the "main" tag of the Drawer upon clicking a ...

htmlreactjsreact-routermaterial-ui

immediate removal upon pressing the button

Struggling to remove data from a datatable when clicking the delete button for quick admin side action. My code isn't functioning properly, even after attempted fixes. Here's my code: <div class="table-responsive"> <table id="datas" cl ...

phphtml

I attempted to use a jQuery code snippet that I found online, but unfortunately, it is not functioning correctly

I have encountered an issue with a jQuery code that I copied and pasted. For some reason, I always struggle to get jQuery to work properly. I am not sure if there are specific requirements for using jQuery. The code works fine on a certain website, but whe ...

javascriptjqueryhtml

Using Angular 2 to trigger an event when a native DOM element is loaded

I am working towards my main objective of having a textarea element automatically focused upon creation. I recently came up with an idea to use e.target.focus() on the onload event. It would look something like this: <textarea rows="8" col="60" (load)= ...

javascripthtmlangular

Maximizing the width of navbar elements with Bootstrap 3

I am currently working on building a webpage with bootstrap3, but I have encountered an issue with the navigation bar. I would like the navigation links ("Web Design", "Development", "Photography", "Blog") to be evenly spaced out within the horizontal na ...

csshtmltwitter-bootstrap-3navbar

Associate information with HTML elements

I've come across this question multiple times, but the solutions are mostly focused on HTML5. My DOCTYPE declaration is: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> I'm looking t ...

javascriptjqueryhtml

Arranging buttons in a horizontal row using Bootstrap 3

Please review the example provided below. Link to Example I am looking to have the <a> tag positioned next to Button 2. ...

csstwitter-bootstrap-3

Connection between modal dialogue and calling function

I currently have a collection of images, each with an attached delete button. Upon clicking the delete button, I trigger a confirmation popup using Twitter Bootstrap modal and jQuery event handling. My main concern now is how to pass a value back to the ...

jquerytwitter-bootstrap

Converting HTML into an image in a Node.js Buffer

Can you suggest a simple method to convert a raw HTML string, like the following: <b>Hello World</b> into a regular PNG image in Node.js Buffer form? I've been exploring various npm packages for a solution that supports this functionali ...

htmlnode.jsnpm