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%);
}
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!