What is the best way to position an image on the left and a span on the right within a <center>

I would like to have an image aligned to the left and a 

<span class="badge badge-primary">v 2.1</span>
on the right, both centered within a <center> tag.

Here is the code snippet:

<center>
   <div class="card" style="margin-top: 5px; border-style: solid;
      border-color: grey;
      border-radius: 4px; border-width: 4px;">
      <img src="../install/images/brand/logo_wide.webp" alt="Thos Host Billing Software"><span class="badge badge-primary">v 2.1</span>
      <div class="container">
         // something    
      </div>
   </div>
</center>
htmlcssbootstrap-4

Answer №1

<center> tag is considered outdated and best avoided. The more modern and versatile option is to use flexbox for layout control, as it offers greater flexibility and ease of use.

If you're looking for detailed information on flexbox, check out the documentation here: https://getbootstrap.com/docs/4.4/utilities/flex/

In my demonstration, I highlight the necessity of using the align-items-* class when incorporating both <img> and <span> elements within a container to prevent unwanted vertical stretching. In cases where this class isn't utilized, wrapping these elements in a <div> is recommended.

img{height:100px}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="d-flex justify-content-center align-items-center">
    <img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="">
    <span class="badge badge-primary">v 2.1</span>
</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

Limiting the movement of the mouse within a specific div using the jQuery library

Is there a way to limit mouse movement within a specific div area when the right button is clicked using the jQuery library? Alternatively, could someone provide guidance on how to achieve this, similar to restricting the movement of a portion of the scr ...

javascriptjqueryhtmlmousemove

Ways to delete a property from an element that was originally included with jquery

On my jsp page, I am implementing a jQuery autocomplete feature for a text field with the id "mytextfield". jQuery(function(){ $("#mytextfield").autocomplete("popuppages/listall.jsp"); }); Sometimes, based on user input and pr ...

javascriptjqueryhtmljsp

Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to ...

htmlcssimage

Tips for applying various CSS properties to a single element using styled-components

Is there a way to style similar elements differently using different CSS properties in styled components? For example: <div></div> <div></div> With the knowledge I have, I can do: export const StyledDiv = styled.div` color: red; ` ...

javascripthtmlcssreactjsstyled-components

How to target and style multiple descendants of an element using CSS

Can you target multiple elements with a common ancestor in CSS using class, id, etc? For example: table.exams caption, tbody, tfoot, thead, tr, th, td If not, is there a method to select all nested elements within that particular element? ...

csscss-selectors

"Keep scrolling through the div's content and then proceed with the

My layout consists of a div container that occupies 80% of the screen, with fixed sidebars on both the left and right taking up 10% each. The content within the div is quite large, so I've applied overflow: hidden to it in order to hide excess content ...

jquerycssscroll

Is it advisable for me to rely on HTML5 tags like <footer> for my website?

Is it true that Internet Explorer has limited support for HTML5 elements? Are there still individuals who rely on IE8 as their browser of choice? ...

htmlvs-web-site-project

HTML Grid of widgets placed on top of content without obstructing it

This is a complex scenario that requires some patience to explain. My goal is to create a grid of widgets that can be dynamically displayed and positioned relative to the main page content. These widgets need to interact with the user as well as the conte ...

htmlcsscss-grid

Unable to define the color of icons path using CSS in Vue 3

When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won&apo ...

cssvue.jssvgtailwind-css

Incorporate a CSS attribute into your code using the cssText method in JavaScript

By using JavaScript, I successfully added an attribute to the HTML tag with the following code: document.documentElement.style.cssText = 'cursor: url("https://image0.png"), auto !important;'; This resulted in the following CSS being ap ...

javascripthtmlcss

To identify the dynamically inserted and generated div element amidst the other elements on the page

My goal is to have a new div generated and inserted over the other elements on the page when a button is clicked. Here is the markup I've written: <div id="parent"> <div id="d1"> </div> <div id="d2"> </div&g ...

javascripthtmlcss

The form submission is not recognizing my custom checkboxes as being checked

I have constructed a custom form component set on Codepen, however the checkboxes are experiencing issues. I am assigning both the prop as true and setting the checked attribute to "checked". These can be verified by inspecting the elements with developer ...

javascriptjqueryhtml

Adding a border with vertical padding above and below two floated divs with different heights

Here is some sample markup: <div class="container"> <div class="one">column a<br />column a</div> <div class="two">column b</div> </div> The content in the inner divs can vary in height and is dynamically g ...

htmlcssheightcss-float

Tips for removing excess white space below a div element following a translateY operation

Looking for a solution to eliminate white space post animation and translateY. Is setting body height to auto the answer? Does translateY result in a bottom margin or is it just body white space that can't be clicked on in inspect mode? Check out my c ...

htmlcssjquery-animate

Formatting an invoice document with Bootstrap 4

Currently in my VueJS project, I am constructing an invoice form with the help of Bootstrap 4. Utilizing this snippet, everything has been running smoothly so far. However, I seem to be struggling when it comes to styling the UI at the moment. The issue I ...

htmlcssbootstrap-4

Designing in Ionic 3.x: Implementing Ion-Icon with a gradient backdrop (ion-chip)

Is there a way to add a gradient background to an icon? I attempted to nest the ion-icon within an ion-chip, like so: <ion-chip class="my-chip"> <ion-icon name="basket></ion-icon> </ion-chip Then, in the .css file: ...

htmlcsssassionic2ionic3

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

javascriptpythonhtmlseleniumtwitter

Is an Object in Javascript an Array of Elements?

Today, I am facing a challenge. I have an HTML Form that can contain a variable number of HTML Input Fields for email addresses. I am using Javascript to process this data and to post it via XMLHttpRequest. To fetch the input fields, I use the following c ...

javascriptjqueryhtmlarrays

Retrieving the essential information from a MySQL database search

I'm struggling with what should be a basic task and can't seem to figure it out. I am running this query: $result = mysql_query("SELECT * FROM Users.Information LIMIT 0,1"); To retrieve the data (like firstName, lastName), I am using the fo ...

phphtmlmysqlselect

Exploring schema.org itemref inquiries

I am currently working on implementing microdata (schema.org) on a website dedicated to a software application. To avoid duplicating code, I am trying to add metadata only once and then reference it throughout the site. However, I have a question regardi ...

htmlschema.orgmicrodata