I am creating a website and want to have two images side by side with a piece of text in the center of both images.
Html:
<div id="body">
<div class="image-row-container">
<img class="image-row image-row-1" src="assets/team-photo.JPG">
<p class="text-overlap" style="position: absolute; left: 25%; transform: translateX(-75%);">The Team</p>
<img class="image-row image-row-2" src="assets/test.JPG">
<p class="text-overlap" style="position: absolute; left: 75%; transform: translateX(-25%);">The Vehicle</p>
</div>
</div>
CSS:
.image-row {
display:inline-block;
width:50%;
height:500px;
}
.image-row-1 {
float:left;
}
.image-row-2 {
float:right;
}
So far, I have managed to place the two images side by side and horizontally align the text, but I can't figure out how to simply vertically align the text to the center of the images. If you have any tips of either my primary issue or any recommendations for tips on formatting, different methods, or poor code, it would be greatly appreciated. I am a novice so any help is good help!
I wrapped each image and text in an additional container, and then absolute positioned the text to be centered on top of the image. I think this is what you were looking for.
.image-row {
display: flex;
}
.image-container {
width: 50%;
position: relative;
}
.image-container img {
width: 100%;
height: auto;
}
.image-container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
margin: 0;
}
<div class="image-row">
<div class="image-container">
<img src="https://placeimg.com/300/500/nature">
<p>The Team</p>
</div>
<div class="image-container">
<img src="https://placeimg.com/300/500/nature?t=1529100921702">
<p>The Team</p>
</div>
</div>
Related
This is what I am trying to recreate.
This is what I have so far for HTML:
.carousel-cell {
position: relative;
}
.board-text {
position: absolute;
top: 50%;
}
<div class="carousel-cell">
<img src="img/board1.png" alt="">
<div class="board-text">
<h4>Funboards</h4>
<h2>Chilli Rare Bird</h2>
<h3>$890</h3>
<p>Buy</p>
</div>
</div>
There is no way to place text over an <img> but you can create a box and then give the box the image as a background-image. Then you can write the text you want in the box.
HTML example: <div id="imageBox">Your text</div>
CSS: #imageBox{background-image: url(img/board1.jpg)}
Hope this helps ;)
I think you're looking for this
.carousel-cell {
position: relative;
}
.carousel-cell img{
width:600px;
}
.board-text {
position: absolute;
top: 50%;
transform:translate(0,-50%);
left:420px;
}
I know this question has been asked a lot, but I haven't been able to find a solution among the answers. I'm trying to center a text on an image, but I'm having some trouble with the vertical alignment. This is my code:
<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="wrap">
<h3 class="sub_category_title">Centered text</h3>
<img src="some image">
</div>
</div>
</div>
and
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
Right now the text is horizontally centered above the image, but I can't figure out how to vertically align it in the middle of the image.
Thanks in advance!
Generally if you're trying to put one element overlapping another, you'll end up using position: absolute or position: relative - otherwise, the contents will naturally arrange themselves in a block flow.
You could try something like this:
.image-wrapper {
position: relative;
text-align: center;
width: 300px; /* change or remove as needed */
margin: auto;
}
.image-link { display: block; }
.image-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
/* The rest of this is just for this demo,
you can change it for your situation. */
font-weight: bold;
color: white;
font-family: sans-serif;
background: rgba(0, 0, 0, 0.5);
}
<div class="image-wrapper">
<a class="image-link" href="#">
<img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
<h3 class="image-text">A Centered Label</h3>
</a>
</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>
The below is HTML code. I am using bootstrap 3 for the design. I placed the text over an image, but the issue occurs as it does not stays in correct position. On resizing the browser the position of the text with background gets misplaced. So please help me how to resolve this issue.
<div class = "col-xs-12">
<h3 class="cen-align">STORIES OF CHANGE</h3>
<img src="img/rig_img1.jpg" class="center-block img-responsive image-wrapper" />
<p class="img-ps">Advocating Land Rights for BPL Dalit communities in Alampur village...</p>
</div>
CSS Code:
.img-ps{
font-size:13px;
text-align:center;
position: absolute;
left:66px;
top:143px;
padding: 10px;
background-color:rgba(0,0,0,0.3);
width: 248px;
color: #FFF;
margin: 0px;
}
.image-wrapper{
position: relative;
width: 250px;
}
I don't know what exactly you need but does this works for you?
HTML:
<div class = "col-xs-12">
<h3 class="cen-align">STORIES OF CHANGE</h3>
<img src="img/rig_img1.jpg" class="image">
<p>Advocating Land Rights for BPL Dalit communities in Alampur village...</p>
</div>
CSS:
.image {
position: relative;
}
p {
position: absolute;
top: 200px;
left: 0;
width: 100%;
color: white;
}
I made a grid with divs and there are images on it. Now i want to get the text directly below image somehow. I don't know how to do it. This is my code:
<div id="grid">
<div id="gridtop1">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridtop2">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridtop3">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridbottom1">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridbottom2">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
<div id="gridbottom3">
<img src="img/img.jpeg" />
<p>Text here</p>
</div>
</div>
And CSS:
#grid {
position: relative;
left: 10%;
width: 80%;
height: 600;
background-color: yellow;
}
#gridtop1 {
position: absolute;
left: 10%;
top: 5%;
}
#gridtop2 {
position: absolute;
left: 40%;
top: 5%;
}
#gridtop3 {
position: absolute;
right: 10%;
top: 5%;
}
#gridbottom1 {
position: absolute;
top: 55%;
left: 10%;
}
#gridbottom2 {
position: absolute;
top: 55%;
left: 40%;
}
#gridbottom3 {
position: absolute;
top: 55%;
right: 10%;
}
Now i tried this:
#grid p {
text-align: justify;
width: [width of img];
}
But it didn't help.
I don't want to make different id for all the p tags. I'm pretty close to giving up and using tables for this. But would be nice to get this to work. The text is below the image but it starts in the middle and goes all the way to the next image. Please someone help i spent like 3 hours trying to solve it.
I dont think you have to sweat so much on the CSS.
Please check this fiddle out and let me know if that solves your problem -
You can implement it by simple CSS (using float and position)
**Fiddle
You can use HTML5 tags as <figure> and <figcaption> (instead of div & p )and display <figure> as inline-boxes.
DEMO (see image caption set below or hover at bottom of image)
<figure>
<img src="http://dummyimage.com/120x150&text=img-2" />
<figcaption>
<p>Caption image</p>
</figcaption>
</figure>
Basic CSS :
figure {
margin:2px;
display:inline-block;
vertical-align:top;
}
to center them, use text-align:center on figure parent container. to have them on the right or left, use text-align:rightorleft;.
text in figcaption , will use width of image as reference given for the width of figure.
if you set figcaption in absolute position, you do not have to mind their width.