I have the following html:
<div class='container'>
<img src="http://lorempixel.com/400/400" />
<div class='button-left'><</div>
</div>
What I would like to achieve is for .button-left to always be in the center of the image, no matter the image size, but instead the div gets positioned according to my html element.
This is my css:
.container img {
position: relative;
}
.button-left {
position: absolute;
top: 50%;
background-color: red;
}
Shouldn't the .button-left div position according to the relative positioned image?
JsBin in case you want to try out a live demo:
https://jsbin.com/cuwaguyiza/edit?html,css,output
You have to set position: relative to the container and not to the image.
Also I suggest translating the button up, so it is perfectly centered.
.container {
position: relative;
}
.button-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Dont use position when no need it.
Flexbox.
.container {
display: flex;
align-items: center;
}
<div class='container'>
<img src="http://lorempixel.com/400/400">
<div class='button-left'>Lorem</div>
</div>
Line-height (if u text is single-line)
.container img {
vertical-align: middle;
}
.button-left {
display: inline-block;
line-height: 400px;
}
<div class='container'>
<img src="http://lorempixel.com/400/400"><!-- dont delete this comment
--><div class='button-left'>Lorem</div>
</div>
.container img {
position: relative;
}
.button-left {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: red;
}
OR
.container img {
position: relative;
display: block;
margin: 0 auto;
}
Related
I'm new to coding and I'm using bootstrap 4.
I want to overlap text with image and align it to the centre, here's the code...please help
HTML
<div class="container-fluid front_page">
<img src="images/front_page_img.jpg" alt="front_page_image" class="front_page_img">
<div class="front_page_brand">
<h1>T.A.C.S.</h1>
</div>
CSS
.container-fluid {
padding: 0;
}
/* FRONT PAGE */
.front_page {
position: relative;
}
.front_page_img {
max-width: 100%;
position: absolute;
}
.front_page_brand {
position: absolute;
color: red;
}
All you would need to do is flex the parent container and justify-content: center;. Then, with your position already being absolute, it will overlap the image. Check out the code snippet below.
.container-fluid {
padding: 0;
}
/* FRONT PAGE */
.front_page {
position: relative;
display: flex;
justify-content: center;
}
.front_page_img {
max-width: 100%;
position: absolute;
}
.front_page_brand {
position: absolute;
color: red;
}
<div class="container-fluid front_page">
<img src="https://dummyimage.com/400/000/fff" alt="front_page_image" class="front_page_img">
<div class="front_page_brand">
<h1>T.A.C.S.</h1>
</div>
.front_page_brand {
position: absolute;
color: red;
left: 50%;
transform: translate(-50%, 0);
}
How to make effect behind the picture? Like you can see in the picture. and of course image have to be responsive.
one line solution:
img {
padding:20px;
background:linear-gradient(transparent 40px,red 0 calc(100% - 40px),transparent 0);
}
<img src="https://picsum.photos/300/300">
Can you please check the below code? Hope it will work for you. In this code, we have given position relative to the img-block and gave background color in it's pseudo-element with position absolute.
.img-block {
padding: 30px;
position: relative;
display: inline-block;
}
.img-block:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 75%;
background: #F9CDF1;
top: 50%;
left: 0px;
z-index: 1;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.img-block img {
position: relative;
z-index: 2;
}
<div class="img-block">
<img src="https://via.placeholder.com/490x590.png" alt="image" />
</div>
You can recreate an effect like this by utilising absolute positioning with a relative parent.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.imageWrapper {
background: rebeccapurple;
width: 200px;
height: 200px;
position: relative;
margin: 16px;
}
.imageWrapper img {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="imageWrapper">
<img src="https://unsplash.it/180/220" alt="">
</div>
Ignore the body styles, they are just to illustrate the point better in the preview. The .imageWrapper and .imageWrapper img are the things you want to pay attention to.
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 need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}