Showcased with picture aligned to the right hand side describing in a lengthy fashion

Can you assist me with this issue? I am trying to position a span and an img inside an li element within a sidebar. My goal is to have the span always display to the right of the image, with the image vertically centered, regardless of the length of the text in the span (which could vary).

Currently, my code looks like this:

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

Here is the HTML:

<li class="sidebar-menu-item">
     <p class="sidebar-menu-button" ><img src="img/logout.png"/>Text that could be very long</p>
</li>

This is what I am aiming for:

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

I would greatly appreciate any assistance on this matter :)

htmlcss

Answer №1

Apply the flex property to the parent element and use align-items: center to vertically align its children.

li {
  list-style: none;
}

li p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
<li class="sidebar-menu-item">
     <p class="sidebar-menu-button">Text that may be lengthy<br>Text that may be lengthy...</p>
</li>

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

Tips for customizing the default CSS styles of a table

This question has been raised on Stack Overflow before. However, the solutions provided do not seem to work for me. I am currently working on an Angular project and I am trying to align the 'Mode of comparison' and the corresponding 'Dropdow ...

htmlcss

Is having async as false really detrimental?

Splitting my inquiry into two sections. Within my website, I am dynamically generating some divs by utilizing ajax post requests to retrieve data from the database. Following is the structure of my setup. <html> <body> <script type=" ...

javascriptjqueryhtmlajax

Searching for specific expressions within HTML files on Windows can be accomplished using the grep or findstr commands, allowing you to display the

I am trying to use grep or findstr to extract the correct IMDB number when searching for a specific movie by its title. For example, the movie "Das Boot" is listed on IMDB with the movie number tt0082096. Currently, I am attempting to search through HTML ...

htmlgrepfindstr

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

How can you adjust the div orientation for small screens using Bootstrap?

I've been working with Bootstrap and I'm facing an issue with the orientation of a div on small screens. On medium screens, I have two columns set to 6, 6 which should stack on top of each other on smaller screens. Here's how I want it to lo ...

htmlcssbootstrap-4

Utilize the power of jQuery's AJAX capabilities

Is it normal for a jQuery AJAX request to take between 1-2 seconds before receiving a response? Is there any way to minimize this delay? The response type is JSON and the HTML code is small. Thank you! ...

javascriptjqueryhtmlajaxjson

How can I avoid columns from breaking in Bootstrap?

<div id="mydiv" class="bg-danger row"> <div> <img src="https://www.discoservicemusicheria.com/shop/wp-content/uploads/2013/03/Michael-Jackson-Thriller-25th-Anniversary.jpg" class="rounded float-left" width="280" height="280"> ...

htmlcssbootstrap-4

Why isn't my li:hover responding the way it should?

Check out this Fiddle When the mouse hovers over the element, an opaque "cloud" appears and I want to completely hide the underline that is normally displayed. The underline is created by using a border-bottom on the parent div. .element_style{ width ...

css

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

javascripthtmljsonobject

Is there a way to make this animation activate when the entire area in front of the link is hovered over or tapped?

I am working on an animation that needs to run behind a link. Here is an example: https://codepen.io/ehbehr/pen/KKNbOvN and below is the HTML and CSS: *, *:before, *:after { margin: 0; padding: 0; } .container { position: relative; width: 100%; ...

javascripthtmljquerycss

Eliminate Bootstrap's styling from HTML characters

The default heavy checkmark (✔) appears as "✔" Bootstrap 4.3 seems to be altering the appearance of the check, causing it to display as a thick-green one, which is not what I prefer -- see example below I want to remove Bootstrap's styli ...

csstwitter-bootstrapbootstrap-4

Give your screen a quick swipe with Ionic's pull-to-refresh

Is there a way to bring the footer of an ionic app closer for refresh or loading more content? I am particularly curious about how to implement the 'pull up to refresh' feature using HTML, CSS, or the Ionic content component. ...

htmlcssangularjstypescriptionic-framework

The navigation bar collapse feature is malfunctioning and not performing as anticipated

the lis inside the collapse class are currently hidden on all screen sizes. I would like them to only be hidden on small or medium size screens. What could be causing this issue? I am using Bootstrap 4.3.1. <nav class="navbar navbar-nav navbar-defau ...

htmlbootstrap-4

Div sections with a parallax slant

Could you guide me on creating multiple homepage sections with parallax background images and a slanted edge? This is the design I'm aiming for: For reference, I am working on this within Wordpress using the Avada theme as my foundation. ...

htmlcsswordpressbackgroundparallax

Is Ursina the right choice for web development?

Looking for a method to compile Ursina for HTML5 using WebAssembly or another technology? I am seeking to make my Ursina Game compatible with Linux & Mac (and potentially Android/iOS with webview), but the current cross-platform compilation options for Py ...

pythonhtmlursina

The Restricted Capacity of LocalStorage in Mobile Safari

Currently, I am working on a Cordova app that needs to save data locally for offline use. This data includes images in the form of base64 strings, but I am facing an issue where local storage is running out after around 7-8 items. It appears that there is ...

ioshtmlcordovamobilesafari

Instructions on removing rows by using buttons within a JavaScript-generated table

This snippet displays JS code to create a quiz index table and HTML code to display the index. function load(){ var data = [ { "id": "qc1111", "quizName": "Quiz1", "course": "111", "dueDate": "1/ ...

javascripthtmljson

Add HTML content individually to each item in the array

I am currently developing a plugin and I need to load a preset in order to populate a form with the relevant data. In an attempt to write concise code, I created a variable called "template" that looks like this: var Fields = '<div c ...

javascriptjqueryhtml

Decoding HTML with Python

My current project involves creating a program that can find the definition of any given word and return it. I managed to achieve this using RegEx to search for text between specific tags where the definitions are stored. However, I am now seeking a more ...

pythonhtmlpython-3.xhtml-parsing

How can I omit spaces in the HTML output when saving a data frame using to_html?

After using the to_html method, I noticed that there are \n after > and spaces before <. Is there a way to prevent them from being saved? Here is an example of what I have: <table border="1" class="dataframe"> <t ...

pythonhtmlpandasdataframe