Achieve Perfect Alignment of Text and Image within Fluid Height Lists

Question

Achieve Perfect Alignment of Text and Image within Fluid Height Lists

Among the items in my list, some consist of a single line of text while others have two lines with a break in between.

I am facing challenges in vertically aligning the image to the right of the text. Aligning is simple when there is just one line of text, but with multiple lines, the image ends up positioned at the top.

<ul>
    <li><a href="#"><img src=""/>Text Text Text<br/>Second Line of Text</a></li>
    <li><a href="#"><img src="" />Text Text Text</a></li>
    <li><a href="#"><img src="" />Text Text Text</a></li>
</ul>

Here's an illustration of the issue:

http://jsfiddle.net/SAwFE/

html css vertical-alignment

Answer 1

Answer №1

If I were to approach this issue, my solution would involve using absolute positioning. You can view the updated code here:

ul li {
    position: relative; /* this line was added to your original code */
}

img {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -10px; /* adjusting for half of image height */
}

To prevent any potential overlap as mentioned in your comment, it might be necessary to increase the right padding of the li element by the width of the img. You can see the modified code here:

ul li { 
    padding: 9px 32px 9px 12px; /* slight modification from your existing code */
    position: relative; /* also added to your existing code */
}

Answer 2

If I were to approach this issue, my solution would involve using absolute positioning. You can view the updated code here:

ul li {
    position: relative; /* this line was added to your original code */
}

img {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -10px; /* adjusting for half of image height */
}

To prevent any potential overlap as mentioned in your comment, it might be necessary to increase the right padding of the li element by the width of the img. You can see the modified code here:

ul li { 
    padding: 9px 32px 9px 12px; /* slight modification from your existing code */
    position: relative; /* also added to your existing code */
}

Achieve Perfect Alignment of Text and Image within Fluid Height Lists

Answer №1

Similar questions

Determining the primary image in Galleriffic

Placing a hyperlink following the statement document.getElementById('').innerHTML =

Avoiding Vue error "Unknown custom element" with namespaced HTML elements

Is there a way to determine if a user has interacted with a scrollbar on a website?

When using setInterval, the image remains static on Safari but updates on Chrome

Using jQuery to vertically center a div

Navigate through the website by transforming the arrow and clicking the link

My Bootstrap 4 table is not displaying as responsive

Issue with styling Icon Menu in material-ui

Error message: The specified file or directory named '-stylus' could not be found

PHP code within PHP script

What is the best way to make a DIV box span the entire webpage without overflowing to the left?

Leveraging Flexbox and flexGrow in conjunction with Textfield

Modify the color with JavaScript by manipulating the Document Object Model (DOM)

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Creating bespoke CSS for an individual post in WordPress

The margin for the navbar cannot be set to "0"

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9

Disable class upon clicking outside the element

Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout