I have 3 images in a raw (using Bootstrap). Under each image there should be a heading, a link and a paragraph of text. All three elements should be centered under the image. As the screen gets smaller, the images go one under another, and those three elements must stay centered under the images. I managed to do this with a heading and a link, it works as needed:
<div class="col-md-4">
<figure>
<img class="img-responsive" src="..." alt="ProjectName">
<figcaption>
<h3 class="text-uppercase">Project Name</h3>
<p>Link to project</p>
</figcaption>
</figure>
</div>
But when I add a paragraph of text like this
<div class="col-md-4">
<figure>
<img class="img-responsive" src="..." alt="ProjectName">
<figcaption>
<h3 class="text-uppercase">Project Name</h3>
<p>Link to project</p>
<p>Some text</p>
</figcaption>
</figure>
</div>
all three elements (heading, link and text) don't stay under the image as the screen gets smaller. Instead, they align in the center of the screen.
Here are my css styles:
figure {
display: inline-block;
}
figure figcaption {
text-align: center;
}
Any ideas how ho fix this?
use text-center utility bootstrap class, then use media query to text-align:left
#media (max-width:640px) {
.text-center {
text-align: left !important/* important only for demo*/
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<figure>
<img class="img-responsive" src="//placehold.it/600" alt="ProjectName">
<figcaption class="text-center">
<h3 class="text-uppercase">Project Name</h3>
<p>Link to project</p>
<p>Some text</p>
</figcaption>
</figure>
</div>
If you are using bootstrap then do like this
if you are using bootstrap then try like this
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder
thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
</div>
</div>
</div>
Related
When I was building a 2 columns layout and having the first items of each row floated to left, I was faced with an issue. If the element's text was much bigger than intended, the rows would break, items being pushed down, so instead of it looking like this:
it looks like this:
The code being:
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
CSS:
.layout {
list-style: none;
}
.layout > li {
vertical-align: top;
width: 49%;
}
.layout > li:nth-child(odd) {
margin-right: 1%;
float: left;
}
.layout > li:nth-child(even) {
margin-left: 1%;
float: right;
}
Which works, but if we are to make the longer, it'd break.
If we add this line:
.layout > li:nth-child(even) + li {
clear: both;
}
It works just perfectly, no matter what I throw at it.
How come?
Just use only float: left for ALL elements in your case.
.layout {
list-style: none;
}
.layout>li {
vertical-align: top;
width: 49%;
float: left;
}
.layout>li:nth-child(odd) {
margin-right: 1%;
}
.layout>li:nth-child(even) {
margin-left: 1%;
}
<ul class="layout">
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
<li>
<article>
<div class="thumb">
<img class="img" alt="" src="">
</div>
<div class="post-info">
<h3>Hey there! You should make me bigger to break the layout.</h3>
<p>Some text here...</p>
</div>
</article>
</li>
Application of clear clears out the floats for current container which would have otherwise got applied due to preceding or inherited styles.
The only layout that is now applied to these elements are their own. That's why, it works as desired.
https://developer.mozilla.org/en/docs/Web/CSS/clear
For your layout, you float box 1 to left, then box2 to left. Then, you apply clear:both because you want to stop applying floats. Then, for the next row boxes, you apply floats again because you want to place them left.
"When you apply clear:both to an element, it basically says "stop floating here" — this element and those after it in the source will not float, unless you apply a new float declaration to another element later on."
This is a follow-up question from this post:
HTML / CSS How do I force images to horizontally display
The code below will display 6 figures. Each figure contains a single image with a caption. The figures are laid out 3 horizontally in 2 vertical groups. Now I want to add an additional image to each of my figures directly below (vertical) the first image. Rest of the layout should remain the same. How do I do that? (I added the extra example image in each figure, but it displays horizontally instead of vertically.)
.group {
white-space: nowrap;
}
.group div {
display: inline-block;
}
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<img src="example2.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
Simply put a <br> between the two images, i.e.
<img src="example.jpg"/><br>
<img src="example2.jpg"/>
<figcaption>image</figcaption>
Hello so I have a simple html code and this is the output:
While the code is
<img class="img-responsive" style="float:left;width:400px;height:700px;" src="../assets/images/san_jacinto.jpg">
<h3>Founding of the town</h3>
<p>Some text here/p>
Now I've managed to do it using bootstrap 2.3.1 media and now I got another problem:
What I need to fix now is the text should continue below the image. Is that possible in bootstrap also? Or if not, what else can I do?
you can use bootstrap Media object :
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
The solution is pleasingly easy, try placing your P and h3 tags inside a parent dive,assign a css class to it, and add paddings to that css class. check it out here:
padding
You can add some right-margin to image or
Left-padding to paragraph or
text-indent to paragraph.
Why don't you put the image inside a col-md-4 and the text inside col-md-8?
<div class="container">
<div class="col-md-4">
<img class="img-responsive" src="../assets/images/san_jacinto.jpg">
</div>
<div class="col-md-8">
<h3>Founding of the town</h3>
<p>Some text here/p>
</div>
</div>
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/
I am a newb. I have finally figured out how to get images aligned on my main page in my index.html along with code in my default.css.
Now I would like to add text under each image. I know this should be easy, but am not able to find anything that seems to work.
Here is my HTML Code:
<div id="random">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
Here is my CSS code:
#random{
max-width: 650px
}
#random img{
display:inline-block;
width:80px;
}
Wrap your images in a container, and put the text under them. Something like this:
http://jsfiddle.net/8xf2N/1/
<div id="random">
<div class='img-container'>
<img src="1.jpg" />
<p>Image One</p>
</div>
<div class='img-container'>
<img src="2.jpg" />
<p>Image Two</p>
</div>
<div class='img-container'>
<img src="3.jpg" />
<p> Image Three</p>
</div>
</div>
CSS:
#random{
max-width: 650px
}
#random img{
width:80px;
}
.img-container{
display: inline-block;
}
You can always use the HTML 5 figure tag. (Assuming your website is follwoing HTML 5 standards). That way, you can nest a tag and style them.
<div id="random>
<figure>
<img src="1.jpg"/>
<figcaption>Your Caption</figcaption>
</figure>
</div>
That way you have selectors to style them with CSS as well.
Try:
#random{
max-width: 650px
}
#random .image-wrap{
display:inline-block;
width:80px;
}
<div id="random">
<div class="image-wrap">
<img src="1.jpg" />
<p>Text for image 1</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
</div>
You should wrap the images in a div. Here is a fiddle http://jsfiddle.net/a6pNw/
CSS:
#random{
max-width: 650px
}
#random div{
display:inline-block;
width:80px;
text-align:center;
}
HTML:
<div id="random">
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>