Note: Not duplicate of CSS center display inline block?
This is my fiddle:
body {
max-width:400px;
}
.scroll {
overflow: auto;
white-space: nowrap;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
I tried display:block;margin:auto in outer div.
I tried position:relative;left:50%;transform:translate(-50%)
I tried text-align:center;
But nothing seems to work. Is it even possible?
Thanks in advance guys :)
try , justify-content : center; or align-items: center; it will bring your content center
if you want to bring your text center , use text-align:center in your .scroll class
body {
max-width:400px;
}
.scroll {
overflow: auto;
white-space: nowrap;
text-align: center;
}
.card {
display:inline-block;
align-items: center;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
You need to add the following code to your CSS.
ol {
padding-left: 0;
}
That will get rid of the space on the left hand side, which belongs to the ol and not any of the li elements.
Jsfiddle
body {
max-width:400px;
}
.scroll {
overflow: auto;
white-space: nowrap;
}
ol {
padding-left: 0;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
You set entire body of the html to max-width:400px so you cannot positioning child elements. If you want to align remove max-width property of body class
Remove
body {
max-width:400px;
}
To Change
body {
}
And then set align to child elements
Try this
body {
}
.scroll {
overflow: auto;
white-space: nowrap;
text-align:center;
max-width:400px;
margin:auto;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
Otherwise if you want to keep entire body max-width
Try this
body {
max-width:400px;
margin:auto;
}
.scroll {
overflow: auto;
white-space: nowrap;
}
.card {
display:inline-block;
width:240px;
list-style-type:none;
}
<section class="scroll">
<ol>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
<li class="card">
<a href="#">
<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
</a>
<p class="castname">Aamir Khan</p>
</li>
</ol>
</section>
</div>
.cards are chidrens scroll and them have display:inline-block; so better way is use of text-align property.Like this:
.scroll {
text-align:center;
//More Code...
}
Demo
Related
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/000000/fff">
<img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/0000ff/fff">
<img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/00ff00/fff">
<img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/ff0000/fff">
<img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
</li>
</ul>
</div>
What combinator selects each img with a class "box-img" in order to replace each with another?
#about .box-img:nth-child(1){
background-image: url(../img/img-1.jpg);}
But it doesn't work.
Could it be the resolution of the images? The original ones are 250 × 250 and the ones I want to replace with are 600 × 400.
Is there a way to replace each image using only CSS?
You should just use JavaScript to update the src attribute instead. Here a short script that will change all images to another after two seconds.
window.addEventListener("DOMContentLoaded", (e) => {
const imgs = document.querySelectorAll("#about .box-img:nth-child(1)");
const newImage = "https://dummyimage.com/100x100/ff00ff/000000&text=Changed"
// set image to another one after two seconds
setTimeout(() => {
imgs.forEach(img => img.setAttribute("src", newImage))
}, 2000)
});
<div id="about" class="tm-content-box">
<ul class="boxes gallery-container">
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/000000/fff">
<img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/0000ff/fff">
<img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/00ff00/fff">
<img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
</li>
<li class="box">
<a href="https://dummyimage.com/50x50/ff0000/fff">
<img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
</a>
</li>
<li class="box box-bg">
<h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Optimize</h2>
</li>
</ul>
</div>
As you can see different image sizes do not hinder you from doing this. You could obviously adjust the logic to do more complicated (yet simple) stuff than replacing all images with the same image but the principle remains the same.
I saw a demo of carousel with thumbnails with bootstrap 3 here.
I am trying to implement the same for bootstrap v4, but could not figure out how to fix some of UI nitty gritty like left/right shadow coming over whole height including thumbnails as well. Here is the fiddle with v4.
Following is HTML code:
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'><img
src='http://placehold.it/100x50&text=slide1' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' />
</li>
<li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' />
</li>
</ol>
</div>
CSS Changes:
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-custom {
margin: 20px auto;
width: 400px;
}
#carousel-custom .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-custom .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-custom .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
opacity: 0.75;
}
For Bootstrap 4 it may be easier to use list-inline for the slider thumbnails and you won't need as much extra CSS.
<div class="col-lg-6 offset-lg-3" id="slider">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
https://codeply.com/go/tBbcVXe1xZ
If you move your controls into the .carousel-inner element, it won't stretch down through the thumbnails:
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide4' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide5' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide6' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide7' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide8' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide9' alt='' />
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
Here's your updated fiddle showing this: JSFiddle
I am using following example and i need to use two title in the page for each item.
<div> div inside li is defined as flex and if i add more than one element it show it as two columns but i want to in two rows and center aligned horizontally & vertically.
If i change the flex to block or other property then title move to top while i want them in center
Not sure how to fix it with minimal css
http://codepen.io/anon/pen/XNqYWd
<ul class="cbp-rfgrid">
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
</ul>
Use flex-direction and justify-content property, like:
.cbp-rfgrid li a div {
flex-direction: column; /* Flex Direction Column */
justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */
}
Have a look at the snippet below (Use full screen):
.cbp-rfgrid {
margin: 35px 0 0 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.cbp-rfgrid li {
position: relative;
float: left;
overflow: hidden;
width: 16.6666667%; /* Fallback */
width: -webkit-calc(100% / 6);
width: calc(100% / 4);
margin:1px;
}
.cbp-rfgrid li a,
.cbp-rfgrid li a img {
display: block;
width: 100%;
cursor: pointer;
}
.cbp-rfgrid li a img {
max-width: 100%;
}
/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background: rgba(71,163,218,0.2);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
text-align: center;
opacity: 0;
}
.cbp-rfgrid li a:hover div {
opacity: 1;
}
.cbp-rfgrid li a div h3 {
width: 100%;
color: #fff;
text-transform: uppercase;
font-size: 1.4em;
letter-spacing: 2px;
padding: 0 10px;
}
/* Example for media query: change number of items per row */
#media screen and (max-width: 1190px) {
.cbp-rfgrid li {
width: 20%; /* Fallback */
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
#media screen and (max-width: 945px) {
.cbp-rfgrid li {
width: 25%; /* Fallback */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
#media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
#media screen and (max-width: 660px) {
.cbp-rfgrid li {
width: 33.3333333%; /* Fallback */
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
#media screen and (max-width: 400px) {
.cbp-rfgrid li {
width: 50%; /* Fallback */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
#media screen and (max-width: 300px) {
.cbp-rfgrid li {
width: 100%;
}
}
<ul class="cbp-rfgrid">
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Heading One</h3>
<h3>Date</h3>
</div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
<li>
<a href="#"><img src="http://placehold.it/600x400">
<div>
<h3>Felis catus</h3></div>
</a>
</li>
</ul>
Hope this helps!
I have currently 4 widgets witch have their own sizes. I have placed them within a main div called #box I get them centered by reducing the width to about 60% and having margin left and right on auto. If I zoom out in my browser the widget blocks moves more to the left and does not stay centered.
<div id="Box"><!--Start Div Box-->
<div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
</div><!--End Div Box-->
#Box
{
background-color:#CCCCCC;
width:60%;
margin-left:auto;
margin-right:auto;
}
Image before zooming browser out
Image after zooming out
The problem is that the container of your images itself is indeed centred, but the images are aligned to the left of that container. If you gave the #box a different background color, you'd see that immediately.
Try giving the #Box element a center, and then center the inside elements as well.
Since you are using <div> elements, I'd go for float: left and giving each element a specific width property. I'd rather go with an inline-block element because it's easier to center, and because you only have images which are naturally inline-block, but this is not what you have implemented.
Check out this fiddle: https://jsfiddle.net/abvt8ekj/
And the snippet:
.container {
background-color: #ee55cc;
}
#Box{
background-color:#CCCCCC;
width:60%;
margin-left:auto;
margin-right:auto;
}
#Box:after {
display: block;
content: "";
clear: both;
}
.Certificate {
width: 25%;
float: left;
overflow: hidden;
}
.Certificate ul,
.Certificate li {
margin: 0;
padding: 0;
}
<div class="container">
<div id="Box"><!--Start Div Box-->
<div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
</div><!--End Div Box-->
</div>
If you don't want to specify a width to your main box, you can use the text-align property :
text-align:center;
Here's a Fiddle with a little demo : https://jsfiddle.net/valentinho14/cst30wuc/
Try instead of using the div called #box be in the center of the page, put another div inside #box1 and align that second div in the center.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#box1{
background-color:black;
}
#box2{
margin:auto;
background-color:green;
width:50px;
height:50px;
display:block;
align:center;
}
</style>
</head>
<body>
<div id = "box1">
<div id = "box2"></div>
</div>
</body>
</html>
That did it for me, and even if you zoom in or out the div will stay in the center. Just put the images into the second div. Take care.
you can try doing it with flexbox like this it will always stay in the center!
and if you dont want the list-style-type dont forget to put padding-left:0px; to the ul's because by default ther is a padding :40px;
#Box{
display:flex;
justify-content:center;
}
<div id="Box"><!--Start Div Box-->
<div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
<ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
<li id="phnjh3wZ" class="Yi5zwOy1yHP">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
<ul id="FVuBAHp" class="TA_links CPqPZ6">
<li id="dYmcZAj7eGOi" class="FKHiRxci">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
<ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
<li id="R3Oc1SU8Y" class="bXEYi56LVvek">
<a target="_blank" href="https://www.tripadvisor.co.za">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
<div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
<ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
<li id="LKMj2Zk" class="Z16i8koQq">
<a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
<img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
class="widCOEImg" /></a>
</li>
</ul>
</div>
</div><!--End Div Box-->
I have the following code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul id="controlsCar" class="entries nav nav-pills nav-justified">
<li data-target="#custom_carousel" data-slide-to="0">
<a href="#">
<span>
<img src="img1.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="1">
<a href="#">
<span>
<img src="img2.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle1</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="2">
<a href="#">
<span>
<img src="img3.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle3</div>
</span>
</a>
</li>
</ul>
</div>
</div>
it resizes perfectly on Safari and Chrome but I do not see any change in the image with using FireFox or IE.
Does it have to do with the SPAN TAG ? Any ideas?
Thanks