I want to align the tab list to center. As you can see in the image below it is shifted to the left. Bootstrap class center-block is already included but still it doesn't work. Please Help me!!!
Here's my HTML of my code:-
<ul class="nav nav-tabs center-block" role="tablist">
<!-- Schedule -->
<li role="presentation" class="active">
<a href="#" aria-controls="dem" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<span>Schedule</span>
</a>
</li>
<!-- Resource -->
<li role="presentation">
<a href="#" aria-controls="resource" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<span>Resource</span>
</a>
</li>
<!-- Automation -->
<li role="presentation">
<a href="#" aria-controls="automation" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<span>Automation</span>
</a>
</li>
<!-- Customize -->
<li role="presentation">
<a href="#" aria-controls="customize" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<span>Customize</span>
</a>
</li>
</ul>
ANd here's my CSS-
.ilpFeatureSection .nav-tabs {
border-bottom: none
}
#media(min-width:480px) {
.ilpFeatureSection .nav-tabs {
width: 390px
}
}
#media(min-width:768px) {
.ilpFeatureSection .nav-tabs {
width: 600px
}
}
#media(min-width:992px) {
.ilpFeatureSection .nav-tabs {
width: 800px
}
}
#media(min-width:1200px) {
.ilpFeatureSection .nav-tabs {
width: 1000px
}
}
Thanks :)
Use nav-justified and remove center-block from your nav.
nav-justified is a prewritten bootstrap class to center your nav. It simply does what #SankarRaj wanted too with .nav-tabs{width:100%}
I believe this is because Bootstrap uses "float: left" on the nav-tabs items. You would need to set "float: none" and "display: inline-block" on the list items
Try this
CSS
.ilpFeatureSection .nav-tabs {
border-bottom: none
margin: auto;
}
Add container and make nav-justified. Then try it in full page
.ilpFeatureSection .nav-tabs {
border-bottom: none
}
#media(min-width:320px) {
.nav-tabs.nav-justified>li{
width:25% !important;
float:left !important;
}
}
#media(min-width:480px) {
.nav-tabs.nav-justified>li{
width:25% !important;
float:left !important;
}
}
#media(min-width:768px) {
.nav-tabs.nav-justified>li {
width:1% !important;
float:none !important;
}
}
#media(min-width:992px) {
.nav-tabs.nav-justified>li {
width:1% !important;
float:none !important;
}
}
#media(min-width:1200px) {
.nav-tabs.nav-justified>li {
width:1% !important;
float:none !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
<!-- Schedule -->
<li role="presentation" class="active">
<a href="#" aria-controls="dem" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<br/>
<span>Schedule</span>
<br/>
</a>
</li>
<!-- Resource -->
<li role="presentation">
<a href="#" aria-controls="resource" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<br/> <span>Resource</span>
</a>
</li>
<!-- Automation -->
<li role="presentation">
<a href="#" aria-controls="automation" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<br/> <span>Automation</span>
</a>
</li>
<!-- Customize -->
<li role="presentation">
<a href="#" aria-controls="customize" role="tab" data-toggle="tab">
<img alt="icon" src="#" class="iconDark">
<img alt="icon" src="#" class="iconWhite">
<br/><span>Customize</span>
</a>
</li>
</ul>
</div>
</body>
</html>
Related
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
I have a list (functions as a menu) with images in it. The images have different proportions, some are square, others are rectangular.
I'm having troubles keeping them on the same line, when the viewport gets smaller (mobile). I'm also using bootstrap to make the tabs.
What I have now on smaller viewports (mobile):
And this is what I want it to look like:
.ProdText_Att_Img {
max-height: 75px !important;
padding: 10px;
}
.ProdText_barekraftLogoer {
display: table;
/* Allow the centering to work */
margin: 0 auto;
}
.tab-content {
padding-top: 25px;
}
.ProdText_bare_UL {
white-space: nowrap !important;
overflow: hidden !important;
}
.ProdText_bare_LI {
display: inline !important;
}
#media only screen and (max-width: 600px) {
.ProdText_Att_Img {
max-height: 45px !important;
padding: 0px;
}
}
<div class="ProdText_barekraftLogoer">
<ul class="ProdText_bare_UL nav nav-tabs" role="tablist">
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_1" aria-controls="tab_1" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Recycle001.svg/2000px-Recycle001.svg.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_2" aria-controls="tab_2" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.bluesign.com/inc/template/th_blue/images/logo.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_3" aria-controls="tab_3" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="http://www.fairtrade.no/fileadmin/system/img/fairtradenorge_logo_214x260.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_5" aria-controls="tab_5" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://cdn.shopify.com/s/files/1/2454/5197/files/biodegradable-bag-4_medium.png?v=1509802905">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_6" aria-controls="tab_6" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.uncpress.org/archive/farmfreshnorthcarolina.com/wp-content/uploads/2011/01/201101_31_Animal-Welfare-Approved.jpg">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_8" aria-controls="tab_8" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.fairwear.org/wp-content/themes/fairwear/dist/img/fair-wear-foundation-logo.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_4" aria-controls="tab_4" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.centexbel.be/sites/default/files/styles/full_width_preserve_ratio_desktop/public/media/image/std100logo.jpg?itok=htVK89Mr">
</a>
</li>
</ul>
</div>
The problems you will face on mobiles is that your images with this approach will be unreadable and to small for the users to recognize them.
But if you are still going to follow this path, please look at the following post
Responsive images inline-block in a div with Bootstrap
It describes a similar problem to yours, just with 3 images you will have to adapt it to your needs.
I added a sytle to your div that has width: 100%. It is possible to add this also in the CSS wiche would like this:
ProdText_barekraftLogoer {
width: 100%;
}
The following is your code snippet with the mentioned changes:
.ProdText_Att_Img {
max-height: 75px !important;
padding: 10px;
}
.ProdText_barekraftLogoer {
display: table;
/* Allow the centering to work */
margin: 0 auto;
}
.tab-content {
padding-top: 25px;
}
.ProdText_bare_UL {
white-space: nowrap !important;
overflow: hidden !important;
}
.ProdText_bare_LI {
display: inline !important;
}
#media only screen and (max-width: 600px) {
.ProdText_Att_Img {
max-height: 45px !important;
padding: 0px;
}
}
<div class="ProdText_barekraftLogoer" style="width: 100%;">
<ul class="ProdText_bare_UL nav nav-tabs" role="tablist">
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_1" aria-controls="tab_1" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Recycle001.svg/2000px-Recycle001.svg.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_2" aria-controls="tab_2" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.bluesign.com/inc/template/th_blue/images/logo.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_3" aria-controls="tab_3" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="http://www.fairtrade.no/fileadmin/system/img/fairtradenorge_logo_214x260.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_5" aria-controls="tab_5" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://cdn.shopify.com/s/files/1/2454/5197/files/biodegradable-bag-4_medium.png?v=1509802905">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_6" aria-controls="tab_6" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.uncpress.org/archive/farmfreshnorthcarolina.com/wp-content/uploads/2011/01/201101_31_Animal-Welfare-Approved.jpg">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_8" aria-controls="tab_8" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.fairwear.org/wp-content/themes/fairwear/dist/img/fair-wear-foundation-logo.png">
</a>
</li>
<li class="ProdText_bare_LI" role="presentation">
<a href="#tab_4" aria-controls="tab_4" role="tab" data-toggle="tab">
<img class="ProdText_Att_Img" src="https://www.centexbel.be/sites/default/files/styles/full_width_preserve_ratio_desktop/public/media/image/std100logo.jpg?itok=htVK89Mr">
</a>
</li>
</ul>
</div>
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
Add margin, padding or even space between 2 list items which uses bootstrap by default.
Tried Topics
Space between bootstrap columns
Here is the image attached
DEMO
<div class="container text-left">
<div class="row">
<div class="col-xs-4 col-sm-12">
<!-- Nav tabs -->
<ul class="nav nav-justified" id="nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#" aria-controls="" role="tab" data-toggle="tab">
<img class="img" src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<span class="quote"><i class="fa fa-quote-left"></i></span>
</a>
</li>
<li role="presentation" class="">
<a href="#" aria-controls="" role="tab" data-toggle="tab">
<img class="img" src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<span class="quote"><i class="fa fa-quote-left"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
since you are using table-cell so applying border-spacing: 10px; or border-spacing: 10px 0; should work for you
.nav-justified {
border-spacing: 10px 0;
border-collapse: separate;
}
see your updated fiddle
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-->