Programming & Software Q&A | CollectiveSolver

Disclosure: My content contains affiliate links.

How to center text in the middle of an image with CSS

1 Answer

/* style-test.css */

.row {
  position: relative;
  display: inline-block;
}

.row h3 {
  position: absolute;
  margin: 0;
  color: #FFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<!-- test.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/style-test.css">
</head>

<body>

    <div class="row">
        <div id="image">
            <h3>image</h3>
            <img src="img/no_picture_avatar.jpg" alt="image" style="width:200px;height:100px;">
        </div>
    </div>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jun 28, 2017 by avibootz

Related questions

1 answer 231 views

231 views

How to horizontally center text in element with CSS

asked Dec 25, 2021 by avibootz

1 answer 234 views

234 views

How to center text in HTML table cells with CSS

asked Dec 12, 2018 by avibootz

1 answer 216 views

216 views

How to create an horizontal line with HTML text in the middle in CSS

asked Jun 14, 2021 by avibootz

1 answer 200 views

200 views

How to rotate an HTML image continuously in CSS

asked Jun 14, 2021 by avibootz

1 answer 230 views

230 views

How to use opacity property to specify the transparency of an image in CSS

asked Oct 11, 2019 by avibootz

2 answers 269 views

269 views

How to horizontally center an HTML <div> with CSS

asked Nov 20, 2018 by avibootz

2 answers 238 views

238 views

How to horizontally center an element in CSS

asked Dec 25, 2021 by avibootz

...