CODEWITHSUNDEEP
htmlcss
sanjihan
sanjihan

Reputation: 6014

center h1 vertically and horizontally in an img element

How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean. I've seen some answers here on SO, but the image always had width and height fixed.

Upvotes: 0

Views: 1190

Answers (5)

jdlm
jdlm

Reputation: 6644

.wrapper {
  position: relative;
}

img {
  display: block;
  width: 100%;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: gold;
}
<div class="wrapper">
  <img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt="">
  <h1>Hello, World!</h1>
</div>

Upvotes: 1

Johann Kratzik
Johann Kratzik

Reputation: 794

Use a combination of relative and absolute positioning, table and table-cell display like this:

CSS:

#headerImage {
    position: relative;
    text-align: center;
    display: inline-block;
}
#headerImage img {
    max-width: 100%;
}
#greeting {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#greetin-h1 {
    margin: 0;
    display: table;
    width: 100%;
    height: 100%;
}
#greetin-h1 span {
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div id="headerImage">
   <div id="greeting">
      <h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
   </div>
   <img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>

Fiddle: https://jsfiddle.net/ve8sot21/1

This way the h1 will always be centered horizontally and vertically no matter the image dimension.

Upvotes: 1

Luca De Nardi
Luca De Nardi

Reputation: 2321

Why not using the image as background?

html, body{
  width: 100vw;
}
#greeting{
padding: 140px 20px 50px 20px;
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg");
  background-repeat: no-repeat;
    background-size: cover;
}

#greetin-h1{
  text-align: center;
  color:black;
}
	<div id="greeting">
		<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
	</div>

Upvotes: 2

Chiller
Chiller

Reputation: 9738

to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1 

#headerImage {
    width:100%;        
    margin-left:auto;
    margin-right:auto;
    background-position:center;
    background-repeat:no-repeat;
   }

#greeting{
  
  padding: 0px;
  position: relative;

}

#greetin-h1{
text-align: center;
color:#000;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index: 9999;
  
}
<div id="greeting">
    <img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/>
    <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>

Upvotes: 2

style28
style28

Reputation: 11

greeting add css style

#greetin {
            padding: 140px 20px 50px 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

Upvotes: 1

Related Questions