I'm trying to center text over an image; however, whenever I resize it, the text does not stay vertically centered.
.hero-image {
margin: 0 auto;
}
.hero-image img {
width: 100%;
}
.hero-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<div class="hero-image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
<div class="hero-text">
Here is the hero text
</div>
</div>
Here's what's happening:
Working properly:
Vertical centering is off when resizing:
Your css for your hero text looks good – If I'm understanding your question correctly, I think the image should be modified to use 100 viewport width / height rather than 100%.
body {
margin: 0;
}
.hero-image img {
width: 100vw;
height: 100vh;
object-fit: cover;
}
.hero-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
You need to set the boundary of the container for positioned child. Add position: relative to .hero-image class. Otherwise it's using the next relative parent for it.
.hero-image {
margin: 0 auto;
position: relative;
}
.hero-image img {
width: 100%;
}
.hero-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}
<div class="hero-image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
<div class="hero-text">
Here is the hero text
</div>
</div>
You can try this translate-free solution:
.hero-text {
position: absolute;
top: 33vw;
text-align: center;
width: 100%;
}
If you plan to keep the image stretched over the whole width.
You can do it with "display: flex".
.hero-image {
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image img {
width: 100%;
}
.hero-text {
}
Related
I have two elements inside a div. How can I vertically center only p element?
.card {
height: 300px;
background-color: aquamarine;
}
<div class="card">
<h1>Hello</h1>
<p>Always in center vertically</p>
</div>
Use flex: display; and justify-content: center;. This will align the p tag to center.
Align h1 with position: absolute; to required position.
You should add position: relative; to .card for the h1 with style position: absolute; to stay inside .card
.card {
height: 300px;
background-color: aquamarine;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding: 50px;
}
h1 {
position: absolute;
width: 100%;
top: 0;
background: beige;
left: 0;
}
<h2>Sample App</h2>
<div class="card">
<h1>Hello</h1>
<p>Always in center vertically</p>
</div>
Since you want to vertically center <p> you can do that by using absolute position. First set your .card to position:relative; so that <p> remains inside it, now give .card p position:absolute; and set top:50%; but this will only center it to its parent element, to make it perfectly center we need to set transform:translateY(-50%);
.card {
height: 300px;
background-color: aquamarine;
position:relative;
}
.card p{
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
If you want to make it horizontally center as well then all you need to do is add left:50%; & transform: translate(-50%, -50%); to .card p where you set both translate X and Y axis to -50%.
.card p{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
I have been trying to keep the text inside the image when I resize the browser. I've tried floating it as well.
<div class="image">
<img src="background2.jpg">
<h1>Hello</h1>
</div>
And here is the CSS
.image img{
width: 90%;
display: block;
margin: auto;
position: relative;
}
h1{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
}
You want the parent element (.image) to be position: relative so that it's what the h1 will be absolutely positioned relative to. You can also give it the width and margin that center it at 90% of the page. Then make the image 100% width of the parent, and use top: 50%; left: 50%; transform: translate(-50%,-50%); to absolutely center the text vertically and horizontally.
.image {
width: 90%;
display: block;
margin: auto;
position: relative;
}
.image img {
width: 100%;
display: block;
}
.stuff {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div class="image">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="stuff">
<h1>Hello</h1>
<h2>Foobar</h2>
</div>
</div>
You can try making the image the background of the parent div:
<div class="image">
<h1>Hello</h1>
</div>
The css would look something like this:
.image {
background: url('background2.jpg') no-repeat center center;
background-size: cover;
}
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.
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>
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>
greeting add css style
#greetin {
padding: 140px 20px 50px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
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.
.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>
I have this simple code to vertically and horizontally center a text element on a page:
body {
max-width: 1200px;
margin: 0 auto;
}
.container {
position: relative;
transform-style: preserve-3d;
height: 100vh;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
Doing this places the text in the in the vertical center of the container, but ever-so-slightly off-center to the right on the horizontal. I would think "left: 50%" would horizontally center it correctly, no?
Close, but you need to add translateX as well. Luckily, there's a nice shorthand for accomplishing both X and Y transform at the same time:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The reason it's slightly off-center is because left: 50% pushes the element so that it's left side is at 50% exactly. Adding the transformX(-50%) negates that extra space. See the snippet below:
.box-container {
position: relative;
height: 200px;
}
.center-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="box-container">
<div class="center-box"></div>
</div>
If you can use flexbox then I would recommend using it. It makes this very simple:
body {
margin: 0;
}
.container {
height: 400px; /* Just for the snippet */
width: 400px; /* Just for the snippet */
background-color: #f4f4f4; /* Just for the snippet */
margin: 0 auto; /* Just for the snippet */
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="center">
This is centered
</div>
</div>
You can find about flexbox browser support from here: http://caniuse.com/#search=flex
I am trying to centre an img within a containing div, where the img fills (minimum) 100% of the width and height of that containing div, meaning thta the image automatically scales to maintain image ratio. It is easy for me to align that img to the top, bottom, left or right, but I am hoping to centre the img both vertically and horizontally. I have been unable to locate the solution thus far, so any help greatly appreciated.
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
right: 0;
left: 0;
top: 0;
z-index: 0;
}
Fiddle
Use transform:translateX(-50) to manage this (but CSS3), large screen or small screen the image will always stay center and keep his ratio aspect.
Here the fiddle
Otherwise if you want something more cross browser you will probably need a bit of javascript, but I may be wrong.
Could you not set the hero image as a background? This will allow for more flexibilty both in terms of positioning and image size.
<section class="hero-image" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg');">
</section>
.hero-image {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
This achieves what you've set out to do exactly. There's other benefits to this method too, for instance, responsive images.
The CSS above sets the properties for any background image within a div class of hero-image. All you need to do then, is inline the background-image itself.
NOTE: If this doesn't have to be CMS driven, you can simply apply the image to the class rather than have it inline.
If you're happy with CSS3 (not supported in some older browsers) you could do this:
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
#hero-image {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
You can try this:
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
display:block;
height: auto;
margin: 0 auto;
top: 0;
z-index: 0;
min-height:100%;
width:100%;
left: -50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
DEMO HERE
You could also just set it as a background with background-size: cover. Like this: https://jsfiddle.net/wzjzjsdp/2/
.img1, .img2 {
height: 400px;
width: 300px;
background-image:url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display:inline-block;
}
.img2 {
width:500px;
height:400px;
}
<div class="img1"></div>
<div class="img2" style="background-image:url(http://placehold.it/350x250"></div>
EDIT: You can use inline style.