I have this below HTML Code:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
I tried this and lot more but couldn't align it to center.
apply style text-align:center to div as:
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; margin:0 auto;text-align:center">
<img src="~/images/loader.gif"/>
</div>
</div>
</div>
Add only this css to #loadme{text-align:center;}
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" style="display:block; text-align:center">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
Do This ..
<div class="col-sm-12 col-md-12">
<div class="answer-picture col-xs-12" id="bookListDiv">
<div id="loadme" class="text-center" style="display:block; margin: 0 auto !important;">
<img src="~/images/loader.gif" />
</div>
</div>
</div>
The DIV containing your IMG should be a display: block;
The image should be a display: inline-block; or its initial state;
By default images or any display: inline-block; objects are much treated like text, so you'll have to assign text-align: center; to your DIV;
Hope this helps you in future.
In css,
#loadme { display:grid; align-items:center;}
Using CSSGrid
Related
I'm using bootstrap to design a site and I'm trying to align images horizontally and hiding the overflow.
Here's the div
<div class="timeline-gallery col-md-12" style="display: inline-block;">
<img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
<img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
<img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
</div>
and the css for the images
.timeline-gallery img {
display: inline-block;
position: relative;
float: left;
margin-right: 5px;
overflow: hidden;
}
They occupy the space I'd like but instead are arranged like below
It's hard to understand what do You want ...
<div class="timeline-gallery col-md-12">
<div class='col-md-4'>
<img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
</div>
<div class='col-md-4'>
<img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
</div>
<div class='col-md-4'>
<img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
</div>
</div>
Remove style='display:inline-block;' from bootstrap column col-md-12. Then add col-md-4 as image container, and CSS for image:
.timeline-gallery img {
max-width:100%;
height:auto;
margin:0 auto;
}
But I'm not sure what do You want...
Here you go with the solution https://jsfiddle.net/forj72t6/1/
.timeline-gallery img {
display:block;
position: relative;
margin-right: 5px;
overflow: hidden;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="coantiner-fluid">
<div class="row">
<div class="timeline-gallery col-md-12">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
</div>
</div>
</div>
I guess this is what you are looking for.
I want to have two images centered side by side. I've tried a lot of things but when I'm trying to change the width (because the images are too large) I have some distance and it's not okay. I want the images centered side by side on both desktop and mobile.
<div class="row" style="text-align:center;"">
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
Try something like:
<style type="text/css">
#left{
float:left;
width:20%;
overflow:hidden;
margin-left: 1%;
}
#right{
overflow:hidden;
}
</style>
<div class="row">
<div id="left">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div id="right">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
It worked for me in the past when I had to to something similar...
Hope it will do for you as well
.img_wrapper{
display:flex;
margin:0 auto;
width:300px;
height:300px;
border:thin black solid;
}
.images{
margin: auto;
}
p{
text-align:center;
}
img{
width:125px;
height:125px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="img_wrapper">
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
</div>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I would do that with Flexbox - If you can life with a little bit of missing browser-support (but in my opinion it is useable).
The code for the ".row"-div (give it an extra class if you use Bootstrap) would be in CSS (without vendor prefixes):
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-itmes: center;
}
With that the inner Elements are next to each other as long as they are fitting so and also vertically centered in the element.
Here the main flexbox-guide i use: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope my answer was helpful.
Edited Answer
As you are using Bootstrap (please see comments below) You can center the images using the Boostrap column system.
Please see here I have updated the CSS, a new col-no-padding class has been created that you can use anywhere if you wish to as it takes away the guttering in the columns and then some basic link and image styles have been added:
.col-no-padding {
padding-left:0;
padding-right:0;
}
.image-wrapper a {
display: block;
}
.image-wrapper img {
width:100%;
}
And the HTML tidied; utilising Bootstraps column and row structure:
<div class="row">
<div class="col-xs-3 col-xs-offset-3 col-sm-2 col-sm-offset-4 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
</div>
I want to know the proper way to put an image in the center of the page, and then beside the image vertical align 2 lines of text. should I put the image and text in one bootstrap coloumn or should i have the image in one coloumn and the text in a seperate coloumn. I know there are a few ways to do this, i just want to know the proper method.
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="font-size:24px;">Test second line. </span>
</div>
</div>
https://jsfiddle.net/k90s5fec/
This is the right way to do this
div{
display: inline-block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-4">
<p style="font-size:48px;">Test</p>
<p style="font-size:24px;">Test second line. </p>
</div>
</div>
This is the fiddle
NOTE : Use https:// when importing external resources,
use p tag instead of span if you want to use block texts.
use this
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="displa`enter code here`yed" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
</div>
</div>
img.displayed
{
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div style="font-size:48px;">Test</div>
<div style="font-size:24px;">Test second line. </div>
</div>
</div>
I want to align different size images to the bottom of a div but the images are also in their own divs so the other answers don't work.
I have the following HTML:
<div class="row footer-links">
<section>
<div class="col-md-4">
<p>
Proudly presented and sponsored by
</p>
</div>
<div class="col-md-8 col-xs-12 logo-links">
<div class="row logo-bottom">
<div class="col-md-2 col-xs-12 logo-border col-md-offset-1">
<img id="rasv" class="center-block" src="img/rasv.png" alt="RASV logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/victoria-farmers.png" alt="Victoria Farmers logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/anz.png" alt="ANZ logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/pwc.png" alt="PWC logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/vac.png" alt="VAC logo">
</div>
</div>
</div>
</section>
</div>
I used the following CSS:
.logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
}
Here is a Code Pen for more information.
You were really close.
The reason it wasn't working was because the columns are floated. Due to this, the elements weren't behaving like a table-cell, therefore rendering vertical-align: bottom useless.
You could simply add float: none and it will work as desired.
Updated Example
.logo-bottom .logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
float: none;
}
As a side note, I increased the specificity of the selector .logo-border to .logo-bottom .logo-border so that float: left was overridden.
I am new to this bootstrap. I have a background image which i want to put in the container fluid. How to do it.
This is my code:
<div class="image_outer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
</div>
</div>
</div>
The corresponding classes are
.image_outer{width:100%;margin:0 auto; background:url(Something/something_bg.jpg) repeat-x; height:128px;}
.fl{float:left;}
.fr{float:right;}
.mr30{margin-right:100px; font-family: ee_nobblee,arial;}
.navi a{ font-size:22px; color:#6D6E70; margin-top:50px; float:left; font-weight:normal; font-family:ee_nobblee,arial;}
.navi a:hover { text-decoration:none; color:#858687;}
Try This CSS:
.image_outer {
width:100%;
margin:0 auto;
background:url(Something/something_bg.jpg) repeat-x;
height:128px;
background-position:cover;
}
Use your code like this and I hope this will work for image
.image_outer{width:100%;margin:0 auto;
background:url(../Something/something_bg.jpg) repeat-x;
height:128px;}
I might be wrong, you are floating children. you need to clear the float so that the background takes up the height specified.
<div class="row-fluid">
<div class="span5">
<div class="fl navi"> One TwoP </div>
</div>
<div class="span2"">
<div id="image1"><img src="/Something/something.jpg" alt="" /></div>
</div>
<div class="span5">
<div class="fr navi"> Three Four </div>
</div>
<div style="clear:both"></div>
</div>