I have a row
<div class="row">
</div>
I'm inserting some dynamic content inside this container
with the following snippet
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
Ex code looks like:
<div class="row">
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
.......
</div>
here I want the content to display from center,
means
if it has only one image show it in center,
if it has 2 images show those 2 images in center
like wise if I have 6 images it should display in a complete row,
If it has more show them in next row middle
How to do this?
EDIT
My question is if there is only one .col-md-2 show that in center of the page,if there are multiple .col-md-2 then show both at the middle,if there are six then it covers all the page
Use css for center align
text-align:center;
Try to use like this.. You can center any element within its parent.
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
width: 940px;
}
use
.text-center
its a bootstrap class. have a look at the bootply
Updated
G.L.P Solution Worked for me
.center-block{
display: block;
margin-left: auto;
margin-right: auto;
}
and call this class in col-md-3 div each div u call it like that
so final code is
<div class="row">
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
<img src="{{imgurl}}" width="40px" height="40px">
</div>
i'm sorry man my reputation is low so i cant rate or comment on ur comment.
Related
I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
Im trying to make an image header with a full width , but the image always take the container width and not 100% width (even if i put the div outside the container). i have tried almost everything and nothing worked and this answers here didnt help. it may be done if i change the .container width in a custom css but this will ruin the entire site design.
code:
<body style="background-color: #eee">
<div class='container-fluid'>
<div class="row" style='width: 100%'>
<div class='' style='height: 10px; margin: 0 0;padding: 0 0 ; width:100%'>
<img class='' src="images/shape1.png" style='height: 100%; width:100%; margin-bottom: 13px'>
</div>
</div>
<div class='row text-center rowStyle' >
<img id='leftLogo' src="images/kslogo.png">
<img id='rightLogo' src="images/kglogo.png">
<div class='searchContainer'>
<table class='table-responsive searchTable'>
<tr>
<td width='15%'>
<img class='searchButton' src="images/btn-search.png" >
</td>
<td width='85%'>
<input type='text' class="form-control searchInput">
</td>
</tr>
</table>
</div>
<div class="row " style="margin-top: 40px; margin-left: auto !important;margin-right: auto !important ; width: 76%" >
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles03.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles01.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class=" text-center col-md-4 items" style=' position: relative ;'>
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles02.png" style=''>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</div>
<div style='height: 80px; margin-top: 84px;padding: 0 0 ; width:100%; background-color: #e3e3e3;'>
</div>
</body>
EDIT: added full code + screenshot
Im using bootstrap3
any help would be appreciated,
Thanks
May it be, that you forget to close the "<div class='container-fluid'>" tag?
the class .container-fluid has the left and right padding set to 15px. So if you don't need that just override it.
Try:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 10px; padding-left: 0; padding-right: 0;">
<img src="images/shape1.png" style="height: 100%; width:100%; margin-bottom: 13px">
</div>
</div>
How to make red banner ad shown in the top of : http://forum.creditcardpaymentgateways.in/index.php same as shown in this site: http://www.creditcardpaymentgateways.in ?
I've tried to use this code but not working out:
<div id="anu-utility2" WIDTH="525" style="margin:auto auto">
<img style="display:block;width:529px;margin:auto auto" WIDTH="529" HEIGHT="75" src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg" title="Click here" /></div>
I want to remove the light colored background rectangle behind the red banner(used in the forum):
The forum is in PHPBB and Site is in Joomla.
you should move anu-utility2 to into rt-utility3
Your Example Source Code:
<div id="rt-utility" class="feature-shadows-light">
<div id="rt-utility2">
<div id="rt-utility3">
**<div id="anu-utility2" width="525" style="margin: auto auto">
<a href="http://www.creditcardpaymentgateways.in/pc-tech-support-payment-gateway-new-offer-from-mumbai-based-comapny.html">
<img style="display: block; width: 529px; margin: auto auto" width="529" height="75"
src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg"
title="Click here"></a></div>**
<div class="rt-grid-6 rt-alpha">
</div>
<div class="rt-grid-2 rt-omega">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
Do you want same as the below image.
You need the gradient image and the below code to achieve this
css:
img
{
border:none;
}
#bannerbg
{
background:url(gradient-div.png) repeat-x;
background-color:#FFFFFF;
height:75px;
}
HTML:
<div id="bannerbg">
<div id="anu-utility2" WIDTH="525" style="margin:auto auto">
<img style="display:block;width:529px;margin:auto auto" WIDTH="529" HEIGHT="75" src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg" title="Click here" /></div>
</div>
<img src="logo.jpg">
<div class="fadehover">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
Actually I want to center the image exactly above the div container. Ok i tried with a simple <center> tag it works but im not sure if this is the smart solution for all browsers. Any ideas? smthing like align it over the div?
<style>
#logo {
display: block;
margin: 0 auto;
}
</style>
↑ This will center the #logo within its parent container.
<div class="fadehover">
<img src="logo.jpg" id="logo">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
OR:
<!-- If you cannot put #logo into .fadehover
for some reason -->
<div id="same-width-as-fadehover">
<img src="logo.jpg" id="logo">
</div>
<div class="fadehover">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
When i display below, the text 'Here is some text' is below the image - i want it to show to the right of the image?
<div style="width:50px;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width:150px;">
<h2>Here is some text</h2>
</div>
<div style="width:50px; display: inline-block;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width:150px; display: inline-block">
<h2>Here is some text</h2>
</div>
changed float:left to display:inline-block. This is a better solution because it doesn't remove items from the document flow. Make sure you specify a width for every one though.
<div style="float: left; margin-right: 10px;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width: 300px;">
<h2>Here is some text</h2>
</div>
<br style="clear: both;" />
This should work.