Center Align Element Vertically with pull-right Class in Bootstrap

HTML Code:

<h5>
<span style="vertical-align:central"><i class="fa fa-angle-right pull-right" style="font-size: x-large;"></i></span>
<img src="/myimage.jpg" /><span style="padding-left: 1em"></span>
<b>  Item 1 - Item 2 </b> <br />
<span style="font-size:small;padding-left:4em">StatusColourCode</span>
</h5>

Is there another way to vertically center the span element with the class fa fa-angle-right pull-right, relative to the h5 element?

I attempted using style="vertical-align:central", but it was not effective.

Screenshoot:

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

jqueryhtmlcsstwitter-bootstrap

Answer №1

For optimal alignment, the vertical-align property should be set to middle instead of central, and it should specifically apply to images.

Answer №2

If you want to center an element vertically within a div, you can't rely on the vertical-align:middle property unless the div is formatted as a table. Instead, you can achieve this effect using CSS3 Transform and CSS Positioning. Check out the code snippet below:

div{
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
}

I hope this solution proves helpful for your needs.

Answer №3

Resolved the issue by including a line-height of line-height:3em

<h5>
<span style="vertical-align:central"><i class="fa fa-angle-right pull-right" style="font-size: x-large;line-height:3em"></i></span>
<img src="/myimage.jpg" /><span style="padding-left: 1em"></span>
<b>  Item 1 - Item 2 </b> <br />
<span style="font-size:small;padding-left:4em">StatusColourCode</span>
</h5>

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

I am looking to both enlarge and shrink a table row

I found this code snippet on a forum, and it almost does what I need. The JQuery code provided collapses the table rows by default and expands them when the 'heading id' is clicked. However, it lacks the functionality to collapse the rows again w ...

jqueryexpandablecollapsable

Arrange elements prior to the treeview within the unordered list/ list items

Below is a snippet of code that I am working with: <ul> <li>group 1 <ul> <li>group 1.1</li> <li> group 1.2</li> <li>group 1.3 <ul> <li>group 1.3.1</li> <l ...

javascripthtmlcss

Issues with mobile stylesheet loading properly

After migrating my website to a new server, I encountered an issue where the text displayed incorrectly on mobile devices but appeared fine on laptops. Surprisingly, when using Chrome's mobile viewer for inspection, everything looked as it should with ...

cssmobile

How can I stop a child node from inheriting any css styles from its parent node?

Imagine a body element with a nested child element (like a div). The body element may have unique CSS styles that are not predetermined (they depend on the specific webpage accessed on the internet). The child element (e.g. div) has a set of fixed CSS s ...

htmlcss

Safari is not functioning properly with the css display:none property

My HTML code looks like this: <div id="loadinganimationsearch"> <div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div> <div id="block_1" class="barlittle"></div> <div id="block_2" ...

htmlcsssafari

Initiate a function following a 3-second click on an image

I'm facing a peculiar challenge with my website - I have an invisible button that needs to be pressed for 3 seconds in order to trigger a specific action. Here is what I've attempted so far: $("#basicChn").on({ mousedown: function() { $ ...

javascriptjqueryhtml

Dealing with notifications using setInterval

I am currently working on creating a Facebook-style notification using setInterval. The notification is functioning correctly, but the issue I am facing is that the div containing the notification closes every 6 seconds. I suspect the root cause is the set ...

javascriptjquery

Deciphering the LocalDate and nested object array in an AJAX response

Seeking assistance, looking for solutions to two problems. Firstly, how can I display LocalDate in an ajax response? And secondly, how do I iterate over a list of Custom objects received in the ajax response? I am passing a List of Custom Objects and Loca ...

javascriptjqueryjsonajaxlist

Capturing the input value from a text box within a table cell, saving it in an array using Javascript, and then transmitting it back

I have a PHP-generated table displayed on my website. The table consists of two rows - the first row contains headers, and the second row contains text boxes inside each cell. My goal is to allow users to input values into these text boxes, then retrieve t ...

javascriptphpjqueryajaxhtml-table

Ajax encountered an error while attempting to load the requested resource

jQuery('input').on('click',function(e){ $.getJSON( "/data.json", function(info){ var name = data.name; } ); }); Every time we click, a JSON request is supposed to be made. But unfortunately ...

phpjavascriptjqueryajaxjson

Tips for retrieving the primary key of the highlighted row in bs_grid

I've integrated bs_grid to showcase a lineup of company names, each associated with a unique GUID identifier. Here's how I've set up the grid: $(function() { $('#grid1').bs_grid({ ajaxFetchDataURL: 'CompaniesList.asmx/G ...

jqueryhtmltwitter-bootstrap

Deactivate the form element when a user selects another button

I am facing an issue with two buttons that are linked to the same modal form. Here is the code snippet for the form: <form name="addUser" ng-submit="(addUser.$valid) ? add() : '';"> <div class="form-group has-feedback" ng-class="ad ...

javascriptangularjshtml

The Bootstrap that is installed locally is not functioning properly, while the Bootstrap from the CDN site is working correctly

I'm currently working through a tutorial called "Let's Scaffold a Web App" with Yeoman, using Grunt, Bower, AngularJS, and Bootstrap. When I reached the initial scaffold, I noticed that the navbar was not being styled by Bootstrap as expected. In ...

angularjstwitter-bootstrapboweryeoman

Tips for inserting an HTML tag within an object

How can I format a list from an array of objects in React? The 'answer' key consists of the text... Question: blah, Answer: `List title The top advantages of Kin are: 1. 2. 3. 4. ` I want to create so ...

htmlreactjsobjectpchart

Employ Mustache.js for displaying a series of data points retrieved from a JSON reply

Utilizing Mustache.js to format the response from a jQuery getJSON() request has been quite helpful. The getJSON request is responsible for obtaining a list of image names, which I plan to display at the end of my content once the call is made. The JSON d ...

javascriptjqueryjsonmustache

Is there a way for me to enable autoplay on the Slice Slider?

I'm struggling to enable autoplay on a slider I have here. Is it possible to quickly set this up in the var settings? I attempted to insert the setInterval(spin, 3000); command before and after the init lines, but it hasn't been successful so fa ...

javascriptcsshtml

Obtaining values from alternating nodes in a SQL query

Can anyone help with extracting values of odd and even nodes in SQL from this XML example? declare @htmlXML xml = N'<div class="screen_specs_container "><div class="left_specs_container">Compatibility:</div><div class="right_spe ...

htmlsqlsql-server

Implementing a collapsible full-width button that contains multiple elements (Bootstrap)

I am currently in the process of developing a responsive calendar that will display additional information in an expandable "well" when the user clicks on a specific event. My goal is to have the button, date, and icon all appear on the same line at full ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Retrieve the ID of the button that was chosen

Hello, I have a card with 3 selectable buttons as described below. <ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()"> <li cla ...

javascriptjqueryonclickbuttonclick

Animating a logo with jQuery slideToggle

I am currently working on adding a sliding drawer feature to the top of my landing page. I have also incorporated a logo in the center at the top edge of the page. My goal is for the logo to move to the center of the drawer's bottom edge when the user ...

jquery-animatetogglebuttonjquery