How to horizontally center UL? - html

Question

nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active">
<a>Example1</a>
</li>
<li class="theme_tab_item">
<a>Example2</a>
</li>
<li class="theme_tab_item">
<a>Example3</a>
</li>
</ul>
</nav>
Anyone can please help me How can I horizontally center navigation bar? I tried margin 0 auto but that was not working anyone can please tell me any alter way to achieve this result?

Answer 1

Just add display: inline-block to your .theme-tabs class and remove width: 100%.
.theme_tabs{
list-style: none;
padding-left: 0;
display: inline-block;
max-width: 1200px;
margin: 0 auto;
}

Answer 2

Add the following style
.theme_tabs{
display: flex;
justify-content: center;
}
nav{
display: block;
text-align: center;
}
.theme_tabs{
display: flex;
justify-content: center;
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active">
<a>Example1</a>
</li>
<li class="theme_tab_item">
<a>Example2</a>
</li>
<li class="theme_tab_item">
<a>Example3</a>
</li>
</ul>
</nav>

Answer 3

try setting its position: relative
its left: 50%
and try playing around with transform so you can center it.
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
transform: translate(-25%, 0);
position: relative;
left: 50%;
display: inline-block;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active">
<a>Example1</a>
</li>
<li class="theme_tab_item">
<a>Example2</a>
</li>
<li class="theme_tab_item">
<a>Example3</a>
</li>
</ul>
</nav>

Answer 4

Method A)
.theme_tab_item {
display: block;<--------change to inline-block
float: left;<-----------remove
//other codes
}
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: inline-block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active"><a>Example1</a></li>
<li class="theme_tab_item"><a>Example2</a></li>
<li class="theme_tab_item"><a>Example3</a></li>
</ul>
</nav>
Method B)
.theme_tabs{
width: 100%;<-----remove
display: inline-block;<----add
//Other codes...
}
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
display: inline-block;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item {
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a {
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active"><a>Example1</a></li>
<li class="theme_tab_item"><a>Example2</a></li>
<li class="theme_tab_item"><a>Example3</a></li>
</ul>
</nav>