This question already has answers here:
Vertical align middle and centered text on top of image
(2 answers)
Closed 5 years ago.
So i have this code to display image gallery. I want to place "box-text" class on the middle of each image. But if i want use position: relative it doesn't work. Text doesn't want to go higher than the bottom of the image, no matter how I set the top property in css.
<div class="container">
<div class="box">
<img src="1.jpg" class="img-responsive">
<div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
</div>
<div class="box">
<img src="2.jpg" class="img-responsive">
<div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
</div>
<div class="box">
<img src="3.jpg" class="img-responsive">
<div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
</div>
</div>
My css styles:
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.box img{
z-index: 1;
}
.box-text{
position: relative;
top:50%;
left: 50%;
z-index: 2;
}
Use position: absolute instead? You can also use transform: translate to help with the centering:
.box {
position: relative;
}
.box-text{
position: absolute;
top:50%;
left: 50%;
z-index: 2;
transform: translate(-50% -50%);
}
Related
I am trying to position a small image in the center of a bibber one. Both images are inside a Bootstrap Column.
<div className="row justify-content-center my-5 ">
<div className="col-xs-10 col-sm-6 my-auto mx-auto">
<Fade left duration={1000} delay={1000} fraction={0.1} >
<div className="father">
<img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
<img src="/img/logo02.png" alt="logo" className="logo"/>
</div>
</Fade>
</div>
And this is the css.
.padreImagenes{
/* background-image: url("../../assets/img/edificios.jpg"); */
text-align: center;
}
.biggerImg{
position: relative;
opacity: 0.8;
}
.logo{
position: absolute;
/* position: absolute;
transform: translate(-200%, 70%); */
/* position: absolute;
top: 60px;
left: 80px; */
}
As you can see in commented CSS code, I have tried setting the smaller image as absolute, and playing around with top, left, even transform/translate. The problem is that, when the site adapts to user screen size, It does not remain centered.
Combining both images with photoshop is not an option, since I want to apply an effect to the "smaller image".
Thanks,
try:
.logo {
position: absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
div {position:relative; display:inline-block;}
img {display:block;}
.logo {
position: absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
<div>
<img src="https://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" alt="">
<img src="https://blogs.salleurl.edu/sites/default/files/blogs/emprendedores/chrome_hacked_Pwnium-300x300.jpg" alt="" class="logo">
</div>
You can set the images container to display: flex and use the flex attributes to center the elements.
However, I haven't tested it with bootstrap, so there might be some styles conflicts.
.father {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
position: absolute;
}
<div class="row justify-content-center my-5 ">
<div class="col-xs-10 col-sm-6 my-auto mx-auto">
<div class="father">
<img height="110%" width="100%" class="img-fluid biggerImg" src="https://picsum.photos/200/150
" alt="edificios"/>
<img src="https://picsum.photos/100/100
" alt="logo" class="logo"/>
</div>
</div>
I am really struggling with getting a text in the middle of every picture.
My gallery has 50 pictures and each of them has a different size. This is my code but it doesn't work :/ could anyone help, please? All "sample" text should be in the middle of the.
html:
<div class="row">
<div class="column">
<img src="/artbook/1.jpg">
<p> sample </p>
<img src="/artbook/2.jpg">
<p> sample</p>
<img src="/artbook/3.jpg">
<p> sample</p>
<img src="/artbook/4.jpg">
<P> sample </p>
<img src="/artbook/5.jpg">
<P> sample </p>
</div>
</div>
css:
.column img {
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 250px;
.column p{
position: absolute;
text-align: center;
z-index: 1;
Something like this should work using an outer div container. It also uses the translate function to properly center the text both vertically and horizontally according to the parent container. One thing to keep in mind is that when you want to position something according to the parent container then the parent container must also be relative or absolute.
Also, by default, a paragraph element has extra padding around it. You may prefer to use a div instead.
.column div.outer {
position: relative;
display: inline-block;
}
.column img {
margin-top: 10px;
vertical-align: middle;
align-content: center;
max-width: 250px;
}
.outer div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<div class="row">
<div class="column">
<div class="outer">
<img src="1.jpg">
<div> sample1 </div>
</div>
<div class="outer">
<img src="2.jpg">
<div> sample2</div>
</div>
<div class="outer">
<img src="3.jpg">
<div> sample3</div>
</div>
<div class="outer">
<img src="4.jpg">
<div> sample4 </div>
</div>
<div class="outer">
<img src="5.jpg">
<div> sample5 </div>
</div>
</div>
</div>
Check it out.
First create a holder for your image and text. Give it position:relative.
Now, absolutely position your p element containing text relative to its holder. But extend your p to all sides with top:0; bottom:0; left:0; right:0;. Now p is occupying the whole holder. Just apply display:flex; to it and center the content with justify-content:center; align-items:center.
.holder{
position:relative;
display:inline-block;
}
.holder:hover img{
filter: brightness(100%);
}
.column img {
filter: brightness(45%);
margin-top: 10px;
vertical-align: middle;
display: block;
align-content: center;
max-width: 250px;
}
.column p{
position: absolute;
display:flex;
justify-content:center;
align-items:center;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
}
<div class="row">
<div class="column">
<div class='holder'>
<img src="http://via.placeholder.com/350x100">
<p> sample </p>
</div>
<div class='holder'>
<img src="http://via.placeholder.com/350x150">
<p> sample </p>
</div>
</div>
</div>
I have a page wherein I have multiple full-width <img>'s - I have to add a <button> and <h2> overlaid upon each image. Images will have variable heights, so elements within need to conform to the perimeter set by their width + height.
An image is styled thus:
CSS
.FullWidthImg {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
HTML
<div id="container"> <!--ONLY STYLING FOR container IS position: relative-->
<img src="xx" alt="xx" style="FullWidthImg"/>
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
Most approaches suggest styling <h2> and <button> with position: absolute - this works if you have one image element and the image always has the same height, however neither is the case for me.
Another approach I've seen is making something like:
<div style="background-image: url(/img.com)">
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
... And then positioning elements within, which could work but I'd like to avoid in-line styling if possible.
Are there any alternative approaches that would work for this use-case?
Building off your first suggestion, here's how you could accomplish your desired layout without inline styles.
.img-wrapper {
position: relative;
}
.img-wrapper img {
width: 100%;
}
.img-wrapper .overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.img-wrapper h2 {
margin: 0 0 .5em;
}
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x150/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x400/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
Hi I want to add text over an image at its bottom center. Its a photo gallery project so all the images are of different dimensions. Css needs to work with the percentages so it works on images of all sizes
<div class="images">
<img src="dummy.jpeg">
<p>Some text to appear>
</div>
I tried reading many questions on stackoverflow but all of them works for one image. I have multiple images with different dimensions.
I want to put the text at the bottom center of the image and a black strip that goes with width 100% over the image. It could be the text background.
Use absolute positioning on the caption <p>
Make the container inline-block
Fiddle: jsfiddle.net/eohtwd1u
.images {
position: relative;
display: inline-block;
}
.images p {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
<div class="images">
<img src="https://placehold.it/350x150">
<p>Some text to appear</p>
</div>
You can use CSS Flexbox. And for the text at the bottom of each image use position: absolute and making your parent position: relative.
Have a look at the snippet below:
.images {
display: flex;
padding: 5px;
}
.img-holder {
position: relative;
margin: 5px;
align-self: flex-start;
}
.img-holder p {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
margin: 0;
}
<div class="images">
<div class="img-holder">
<img src="http://placehold.it/100x100">
<p>Some text</p>
</div>
<div class="img-holder">
<img src="http://placehold.it/120x120">
<p>Some text</p>
</div>
<div class="img-holder">
<img src="http://placehold.it/150x150">
<p>Some text</p>
</div>
</div>
Hope this helps!
<!-- comment to fool the edit limiter -->
img{
width:500px;
height:200px;
}
.images{
width:500px;
height:200px;
align-items:center;
position:relative;
}
p{
position:absolute;
bottom:0;
color:yellow;
left:50%;
}
span{
position: relative;
left: -50%;
}
<div class="images">
<img src="https://i.stack.imgur.com/wwy2w.jpg">
<p><span>Some text to appear></span></p>
</div>
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
<div class="col-md-3 image-container">
<img class="image" src="path-to-my-image">
</div>
<div class="col-md-9 dynamic-text-container">
<p><!-- Dynamic text here --></p>
</div>
I am using bootstrap 3 in my project. How do I centre the image vertically inside the div having variable height (WITH CSS TABLE CENTERING)?
Here's a demo:
http://www.bootply.com/7rSVv7uDBu
Jsfiddle Demo
Amended CSS
.card{
display:table;
}
.image-container,
.dynamic-text-container{
display:table-cell;
vertical-align:middle;
}
.image-container {
width:25%; /* or some other value */
}
.image-container img {
display: block;
margin:0 auto;
}
Take a look at this:
HTML:
<div class="col-md-3 image-container">
<img class="image" src="image.png" height="200px;" width="200px" />
</div>
<div class="col-md-9 dynamic-text-container">
<p>Some text....</p>
</div>
CSS:
.image-container {
height: 600px;
text-align: center;
}
.image {
position: relative;
top: 50%;
margin-top: -100px; /* half of image height */
}
DEMO HERE