This is the WordPress theme tab I am working on and I am trying to make he tabs center aligned. I tried to make various changes in the firebug but the alignment doesn’t set to center accurately cause when I change the width the alignment gets unaligned. Kindly let me know how can I make the tabs center aligned like following image which should work regardless whatever the width is:
/*Tab*/
.shortcode-tab-wrap .tabs {
list-style: none;
margin: 0;
}
.shortcode-tab .tabs li.tab {
float: left;
position: relative;
}
.shortcode-tab .tabs li.tab a {
display: block;
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.shortcode-tab .tabs li.tab a .separate {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
display: block;
}
.shortcode-tab .tabs-content {
padding: 20px;
}
.shortcode-left-tab {
position: relative;
}
.shortcode-left-tab .tabs {
position: absolute;
top: 0;
left: 2px;
width: 200px;
}
.shortcode-left-tab .tabs li.tab {
position: relative;
}
.shortcode-left-tab .tabs li.tab a {
display: block;
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.shortcode-left-tab .tabs li.tab a .separate {
position: absolute;
top: 0;
right: -1px;
width: 1px;
height: 45px;
display: block;
}
.shortcode-left-tab .tabs-content {
margin-left: 202px;
padding: 20px;
}
1 comment