Welcome to collectivesolver - Programming & Software Q&A. A website you can trust. All programs tested and works. Contact: aviboots(AT)netvision.net.il
Liquid Web Managed Dedicated Server: RAID 1 SSD with 16GB of RAM minimum! 24/7 On-Site Heroic Support! Industry-Leading SLA!

BlueHost Web Hosting

Ecommerce Software - Best Ecommerce Platform Made for You - Free Trial

Ecommerce Software - Best Ecommerce Platform Made for You - Free Trial

getflywheel wordpress hosting


Liquid Web Cloud VPS Hosting

8,512 questions

11,796 answers

573 users

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

1 Answer

0 votes
/* 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>

 




answered Jun 28, 2017 by avibootz
...