Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container">
- <div class="col-md-12">
- <ul id="tabs" class="nav-tabs">
- <li class="col-md-4 nav-list">
- <a href="#" class="nav-block">
- <span class="header">Data</span>
- </a>
- </li>
- <li class="col-md-4 nav-list">
- <a href="#" class="nav-block">
- <span class="header">Charts</span>
- </a>
- </li>
- <li class="col-md-4 nav-list">
- <a href="#" class="nav-block">
- <span class="header">Reports</span>
- </a>
- </li>
- </div>
- </div>
- .container ul {
- list-style: none outside none;
- }
- li {
- display: list-item;
- }
- .col-md-4 {
- width: 33%;
- }
- .nav-block {
- background-color: #FFA500;
- display: block;
- min-height: 70px;
- position: relative;
- }
- .container .nav-block .header {
- color: #FFFFFF;
- font-size: 2em;
- font-weight: bold;
- left: 20%;
- padding: 5px;
- position: relative;
- text-align: center;
- top: 21%;
- }
- .nav-block {
- background-color: #FFA500;
- display: block;
- min-height: 70px;
- position: relative;
- text-align: center; /*New Edit*/
- }
- .container .nav-block .header {
- color: #FFFFFF;
- font-size: 2em;
- font-weight: bold;
- /*left: 20%; - Remove*/
- padding: 5px;
- position: relative;
- text-align: center;
- top: 21%;
- }
- .nav-block {
- background-color: #FFA500;
- display: block;
- min-height: 70px;
- position: relative;
- text-align: center;
- }
- .container .nav-block .header {
- color: #FFFFFF;
- font-size: 2em;
- font-weight: bold;
- padding: 5px;
- position: relative;
- text-align: center;
- top: 21%;
- }
- .container .nav-block .header {
- color: #FFFFFF;
- font-size: 2em;
- font-weight: bold;
- padding: 5px;
- }
- <div class="container">
- <div class="col-md-12">
- <ul id="tabs" class="nav-tabs">
- <li class="col-md-4 nav-list">
- <a href="#" class="nav-block">
- <span class="header">Data</span>
- </a>
- </li>
- <li class="col-md-4 nav-list">
- <a href="#" class="nav-block">
- <span class="header">Charts</span>
- </a>
- </li>
- <li class="col-md-4 nav-list">
- <a href="#" class="nav-block">
- <span class="header">Reports</span>
- </a>
- </li>
- <!--closing the ul tag-->
- </ul>
- </div>
- </div>
- .container ul {
- list-style: none outside none;
- }
- li {
- display: list-item;
- }
- .col-md-4 {
- width: 33%;
- }
- .nav-block {
- background-color: #FFA500;
- display: block;
- min-height: 70px;
- position: relative;
- text-align:center; /*aligning the text center*/
- line-height:60px; /*this gives vertical alignment to your element*/
- }
- .container .nav-block .header {
- color: #FFFFFF;
- font-size: 2em;
- font-weight: bold;
- left: 0; /*removed the defined 20% to center you text inside anchor <a> tags*/
- padding: 5px;
- position: relative;
- text-align: center;
- top: 21%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement