How to center an image vertically inside a link using CSS

My goal is to vertically align an image inside an anchor element using the following code:

<ul class="thumbnails">
    <li class="span2"> 
        <a href="#" class="thumbnail">
           <img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
        </a>
    </li>
</ul>

I have tried various methods found online, but none seem to work for me. I am utilizing the Bootstrap thumbnails class, and I'm not sure if this is causing the issue.

Setting a line-height as suggested hasn't yielded the desired result either.

Please view a simple plunker for reference.

http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

UPDATE: I've made updates to the plunker. Text vertical alignment is functioning properly, but aligning images remains unresolved.

htmlcsstwitter-bootstrap

Answer №1

Check out this solution:

.thumbnail {
    line-height: 150px; // height specified in the original post's plunker
}
.thumbnail img {
   margin: auto;
   vertical-align: middle; 
   display: inline-block;
}

To vertically align images, add display: inline-block; and set the parent anchor element's line-height to achieve the desired effect.

VIEW LIVE EXAMPLE

Answer №2

creative workaround for flex layout without a fixed line-height:

introduce a div container

    <a href="#" class="thumbnail">
        <div class="d-flex justify-items-center">
           <img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
        </div>
    </a>

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

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

htmlcss

Is it possible to add and delete DIVs simply by clicking on a link?

By utilizing a select dropdown list and appending the HTML code stored in the variable "code" (resembling <div>...</div>) right before the end of the div with ID mydiv using $(code).appendTo('#mydiv');. Within these dynamically added ...

jqueryhtml

Step-by-step guide on transforming a raw hexadecimal image into an HTML img tag

I have a raw hexadecimal representation of an image, such as: "FF00FF00FF00" Each pair of letters represents the color of one pixel. For example, in this case it is 6 pixels alternating between white and black, forming a 2x3 pixel grid (width x height). ...

javascriptpythonhtmlimage

How to resolve the unusual spacing issue caused by Bootstrap?

I am encountering an issue with positioning two images on my website. I want one image to float all the way to the left of the viewport and the other to the right. However, there seems to be a strange space created on the right side of the right image. I a ...

htmltwitter-bootstrapbootstrap-5

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

javascripthtmlcssmenu

Generate a two-dimensional array of pixel images using HTML5 canvas

Hey everyone, I'm trying to copy an image pixel to a matrix in JavaScript so I can use it later. Can someone take a look and let me know if I'm using the matrix correctly? I'm new to coding so any help is appreciated. Thanks! <canvas id= ...

javascripthtmlcanvaspixel

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

javascriptjqueryhtmlcss

Tips for managing the width of tr:nth-child(odd)

I am in search of a way to style my datasheets using tr:nth-child(odd). Below is the code snippet I am currently using: My main concern lies in adjusting the width. I aim for it to occupy a space that measures 200px by 400px The depth does not pose an is ...

htmlcss

Display the picture for a few moments, then conceal it. A button will appear to reveal the following image after a short period

For my project, I want to create a webpage for school where I display one image that disappears after 5 seconds, followed by a button. The user must click the button before the next image appears and stays for another 5 seconds. This sequence repeats each ...

javascriptjqueryhtml

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

htmlcssangular

Styling errors with jQuery validation

How can I remove the borders in ul > li elements? Here is my current setup: errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', errorContainer: $('div.error'), I have tried the following: div.message{ bac ...

jquerycssvalidation

Struggling to unlock the mystery of a jammed trigger box

I'm currently working on implementing a small 'trigger box' that will expand upon clicking. It was functional before, but it seems to be encountering an issue now and I'm unsure of the cause. While I have some understanding of HTML and ...

javascriptjqueryhtml

What is the best way to remove the background from a button that uses -moz

After adding the select component to my page, I noticed a problem with the select button in Firefox. In Chrome, the arrow down button looks normal, like this, but in Firefox it appears differently, as shown in this image. How can I remove the background ...

htmlcssfirefox

Styling a scrollbar with CSS3 for a container

Is there a way to customize webkit scrollbars using CSS3? I am referring to the following properties: ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); bor ...

htmlcssscrollbar

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

htmlangulartypescriptcomponents

Utilizing the essential "required" attribute in HTML5 in conjunction with a submit Button

I'm encountering a frustrating issue with a form. I typically use the 'required' attribute in an input box for quick validation, but when I switch to using a button instead, the validation doesn't seem to work. Is it possible that the & ...

htmlformsbuttonsubmitrequired

Tips for keeping your button fixed in place

I am encountering an issue where my button moves below the select dropdown list when I try to make a selection. Is there a way to keep the button in place even when the dropdown list from the select box is visible? For reference, here is the current outp ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The arrangement of <source> tags within the <audio> element can cause issues with browser compatibility

I'm having a slight issue with the audio files on my webpage. I've set up both MP3 and Ogg Vorbis files using FFmpeg to ensure compatibility with modern browsers. However, I've noticed that Safari only plays the audio when the MP3 file is li ...

htmlaudio

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...

javascripthtmlcss

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using li:nth-child( ...

csscss-selectorscss-transitionsopacitysiblings