Is it possible to overlay a vertical middle on top of an image with an undefined height?

Question

Is it possible to overlay a vertical middle on top of an image with an undefined height?

I've been struggling to make this work for the last 24 hours. Initially, I got it working in Chrome using CSS tricks' block:before method, but then realized it didn't function properly in Firefox.

I attempted the table method as an alternative, but encountered issues with achieving 100% height.

The main goal is to position a title in the middle of each masonry brick.

Edit: My objective is to center the  tag in the middle of the image. The images vary in height but have a consistent width of 200px.

<div class="item">
<p><?php the_title(); ?></p>
<img src="<?php echo $url; ?>"  />
</div>

Edit: I want the text to be centered on the Overlay element. The  tag has a height of 1.5em and dynamic length, which should be handled with overflow auto. The overlay element sits absolutely over the img, which can vary in height but is always 200px wide.

<div class="item>
<div class="overlay" style="overflow:hidden; height:100%; width:100%; position:absolute;">
<p>the title</p>
</div>
<img src="<?php echo $url; ?>"  />
</div>

Your assistance would be greatly appreciated.

html css

Answer 1

Answer №1

Consider this example markup:

<div class="item">
    <p><?php the_title(); ?></p>
    <img src="<?php echo $url; ?>" />
</div>

If you prefer using pure CSS, you can absolutely position the  element within the parent container .item. This method assumes that the .item element has a set width, which is usually the case when using jQuery masonry.

To center the  element, set its top and left to 50% and then use CSS3 transform to offset it by half of its own dimensions:

.item {
    position: relative;
    width: 300px;
}
.item > p {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.item > img {
    display: block;
    width: 100%;
}

http://jsfiddle.net/teddyrised/e3pFy/3/

The downside of this pure CSS approach is the need for vendor prefixes and lack of support in older browsers like IE8. For compatibility with older browsers, a JS solution using jQuery can be implemented:

$(function() {
    $(".item > p").each(function() {
        $(this).css({
            "margin-left": $(this).outerWidth() * -0.5,
            "margin-top": $(this).outerHeight() * -0.5
        });
    });
});

Instead of using CSS transform, this script calculates and sets negative margins equal to half the dimensions of the element.

http://jsfiddle.net/teddyrised/e3pFy/4/

A drawback of this method is the need to monitor events that may impact page layout, such as viewport resizing, which can lead to complex and bulky code.

Answer 2

Consider this example markup:

<div class="item">
    <p><?php the_title(); ?></p>
    <img src="<?php echo $url; ?>" />
</div>

If you prefer using pure CSS, you can absolutely position the  element within the parent container .item. This method assumes that the .item element has a set width, which is usually the case when using jQuery masonry.

To center the  element, set its top and left to 50% and then use CSS3 transform to offset it by half of its own dimensions:

.item {
    position: relative;
    width: 300px;
}
.item > p {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.item > img {
    display: block;
    width: 100%;
}

http://jsfiddle.net/teddyrised/e3pFy/3/

The downside of this pure CSS approach is the need for vendor prefixes and lack of support in older browsers like IE8. For compatibility with older browsers, a JS solution using jQuery can be implemented:

$(function() {
    $(".item > p").each(function() {
        $(this).css({
            "margin-left": $(this).outerWidth() * -0.5,
            "margin-top": $(this).outerHeight() * -0.5
        });
    });
});

Instead of using CSS transform, this script calculates and sets negative margins equal to half the dimensions of the element.

http://jsfiddle.net/teddyrised/e3pFy/4/

A drawback of this method is the need to monitor events that may impact page layout, such as viewport resizing, which can lead to complex and bulky code.

Answer 3

Answer №2

In case you have a 'p' element with defined dimensions, here's a simple way to handle it:

.item
{
    width:300px;
    position:relative;
}
p
{
    position:absolute;
    height:1.5em;
    margin-top:-.75em;
    top:50%;
}

(Feel free to explore other methods shared in the link, based on your current or future layout needs)

Answer 4

In case you have a 'p' element with defined dimensions, here's a simple way to handle it:

.item
{
    width:300px;
    position:relative;
}
p
{
    position:absolute;
    height:1.5em;
    margin-top:-.75em;
    top:50%;
}

(Feel free to explore other methods shared in the link, based on your current or future layout needs)

Is it possible to overlay a vertical middle on top of an image with an undefined height?

Answer №1

Answer №2

Similar questions

Get rid of the spaces in web scraping <tr> tags using Node.js

IE9 fails to display li::before element correctly

Centering the logo using Material-UI's alignment feature

Conceal content within a bullet point

Is there a way to position images alongside input fields using Bootstrap?

The form continues to submit even if the validation process fails

centered calculation with an offset

Problems with IE8 - Rendering correctly on all other browsers

How to utilize the CSS hover feature within an Angular directive?

Tracking User Visits in Codeigniter

Toggle the menu using jQuery on unordered list items

The CSS property overflow:hidden or overflow:scroll is not functioning as expected when applied to a

Stretching the limits: Combining and expanding your Styled Components theme

The footer should remain at the bottom of the page without being permanently fixed

Autocomplete feature enhanced with the ability to validate and clear out

Incorporating an additional table dynamically based on height considerations – can you provide visuals as guidance?

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

Activate a tooltip on the button depending on the value entered in the search field

Updating an element within a for loop using Angular TypeScript

What could be causing the video not to display in landscape mode on the iPad Pro?