'how do i align the center of some text to the bottom and center of an image with css

all of the methods I see can only center it to the bottom or the center, not both, and usually those methods mess with the scaling of the image

My code:

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="solar_website_css.css">
    <meta charset="utf-8">
    <title>the sun now</title>
  </head>
  <body>
    <div class="aia193im">
      <img src="https://sdo.gsfc.nasa.gov/assets/img/latest/latest_4096_0193.jpg"/>
    </div>
    <div class="aia193txt">SDO AiA 193 Å </div>
  </body>
</html>

CSS:

img {
 max-width: 100%;
 max-height: 100%;
}
.aia193im {
  height: 300px;
  width: 300px;
}
.aia193txt {
  position: absolute;
  vertical-align: middle;
}
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions