Solution 1 :

Figured it out. I used:

#wrapper {
    height: 1080px;
}

#currentslide {
    display: inline-block;
    background-color: rgba(0,0,0,0.8);
    color: white;
    text-align: center;
    line-height: 1;
    font-size: 32px;
    padding: 10px;
    
    position:absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%);
}

Problem :

I’m working on an alternate display for a presentation program that replaces an HTML div with the text of the slide.
I want to have the bottom of the text aligned to a certain point, so that it has the same bottom point regardless of the number of lines.

I have now put that div inside another (id=”wrapper”) in order to get it to align at the bottom. The screen will always be 1920×1080. I’ve used the following CSS:

 #wrapper {
        height: 1040px;
    }
    
    #currentslide {
        display: inline-block;
        background-color: rgba(0,0,0,0.8);
        color: white;
        text-align: center;
        line-height: 1;
        font-size: 32px;
        padding: 10px;
        
        vertical-align: bottom;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
    <div id="currentslide"></div>

The inline-block is to give a background that changes with the text width, but I think it’s interfering with my placement.

Thanks for any help!

By

Leave a Reply

Your email address will not be published. Required fields are marked *