CODEWITHSUNDEEP
htmlcss
I_like_python
I_like_python

Reputation: 67

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;
}

Upvotes: 0

Views: 646

Answers (1)

alechristopher
alechristopher

Reputation: 144

Please be more specific on where you want the text. If your desire is for the text to be centered underneath the image, to replicate a caption, place the items in a flex container, and align them center.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: lightblue;
}

.figure {
  height: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: lightgray;
  border: 1px solid black;
}

.figure img {
 max-width: 90%;
 max-height: 90%;
}

.figure .caption {
 /* Stlye Caption Here */
 background-color: white;
}
<div class="figure">
  <img src="https://sdo.gsfc.nasa.gov/assets/img/latest/latest_4096_0193.jpg"/>
  <div class="caption">SDO AiA 193 Å</div>
</div>

<div class="figure">
  <img src="https://sdo.gsfc.nasa.gov/assets/img/latest/latest_4096_0193.jpg"/>
  <div class="caption">SDO AiA 193 Å</div>
</div>

Upvotes: 1

Related Questions