I want to display several images next to each other and each image has a date below it. The date is wider than the image and I would like to center the image on top of the date. Here's a code snippet
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/17/11 03:29pm)
</div>
</div>
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/22/11 02:16pm)
</div>
</div>
If I'm understanding you right, you should just be able to use text-align: center:
http://jsfiddle.net/rahjU/
To shift your image Before other content (visually)
.img {
order: -1;
}
W3
Related
I've been trying to get a hyper link to be centered above a picture. I tried using a div class tag to center it, but they won't allow pixels.
HOMEPAGE <img src="1.jpg width="300" height="300" />
This is what it looks like after I run it:
I want the hyperlink to line up in the middle of the picture.
If you add a text-align: center to the container element you will get what you want:
<div style="text-align: center;">
HOMEPAGE<br />
<img src="https://dummyimage.com/150x100/s7e/ffe" width="300" height="300" />
</div>
A Container Approach with CSS
CSS:
.imagecontainer {
width:300px;
text-align:center;
}
HTML
<div class="imagecontainer">
<a href="link">
Some text
</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Domestic_goat_kid_in_capeweed.jpg" width=300/>
</div>
JSfiddle
Try using the element DIV, setting the width to 300 pixels just like your image and CSS to align the link to center:
<div>
<div style="width: 300px; text-align: center"> HOMEPAGE </div>
<div><img src="1.jpg width="300" height="300" /></div>
</div>
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I have a three column layout and one of them is like -
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
<div class="mask">
</div>
<img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
</a>
<div class="image_links">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
<i class="icon-search">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
I want to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?
Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}
I need to align the play button image in the center of another image.
The example that I have is breaking when titles are long.
How can we align blue color image exactly over the large image
Fiddle
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
</div>
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
Just put your play-item-wrapper inside the container video-image-wrapper and add a relative positioning on it.
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
</div>
<div class="video-details-wrapper">
<span>this is video short video title</span>
</div>
</div>
And in CSS
.video-image-wrapper { position: relative; }
JSFiddle: https://jsfiddle.net/L51bd8vr/
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>