Solved

How do you center this code?

Posted on 2014-12-22
19
133 Views
Last Modified: 2014-12-23
I don't understand how to center this code on my website, the <center> code isn't working

			<ul class="nav nav-pills">

				<?php if(!empty($this->affix)) { ?>
				<li class="dropdown active">
					<a href="<?php echo $this->pagination->link; ?>"><?php echo $language['misc']['reset_filters']; ?></a>
				</li>
				<?php } ?>

				<li class="dropdown active">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $language['misc']['order_by']; ?><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="<?php echo $this->pagination->link . $order_by_link . '&order_by=online_players' ?>"><?php echo $language['misc']['order_by_players']; ?></a></li>
						<li><a href="<?php echo $this->pagination->link . $order_by_link . '&order_by=votes' ?>"><?php echo $language['misc']['order_by_votes']; ?></a></li>
						<li><a href="<?php echo $this->pagination->link . $order_by_link . '&order_by=favorites' ?>"><?php echo $language['misc']['order_by_favorites']; ?></a></li>
						<li><a href="<?php echo $this->pagination->link . $order_by_link . '&order_by=server_id' ?>"><?php echo $language['misc']['order_by_latest']; ?></a></li>
					</ul>
				</li>

				<li class="dropdown active">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $language['misc']['filter_highlight']; ?><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="<?php echo $this->pagination->link . $filter_highlight . '&filter_highlight=1' ?>"><?php echo $language['misc']['filter_yes']; ?></a></li>
						<li><a href="<?php echo $this->pagination->link . $filter_highlight . '&filter_highlight=0' ?>"><?php echo $language['misc']['filter_no']; ?></a></li>
					</ul>
				</li>

				<li class="dropdown active">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $language['misc']['filter_status']; ?><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="<?php echo $this->pagination->link . $filter_status . '&filter_status=1' ?>"><?php echo $language['misc']['filter_online']; ?></a></li>
						<li><a href="<?php echo $this->pagination->link . $filter_status . '&filter_status=0' ?>"><?php echo $language['misc']['filter_offline']; ?></a></li>
					</ul>
				</li>

				<li class="dropdown active">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $language['misc']['filter_country']; ?><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<?php foreach($this->country_options as $country) { echo '<li><a href="' . $this->pagination->link . $filter_country . '&filter_country=' . $country . '">' . country_check(2, $country) . '</a></li>'; } ?>
					</ul>
				</li>

				<li class="dropdown active">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo $language['misc']['filter_version']; ?><b class="caret"></b></a>
					<ul class="dropdown-menu">
						<?php foreach($this->version_options as $version) { echo '<li><a href="' . $this->pagination->link . $filter_version . '&filter_version=' . $version . '">' . $version . '</a></li>'; } ?>
					</ul>
				</li>

			</ul><br /></center><hr>

Open in new window

0
Comment
Question by:johandrex
  • 7
  • 5
  • 4
  • +3
19 Comments
 
LVL 25

Expert Comment

by:Lee Savidge
ID: 40512737
Use this:

<div align=center>
you code
</div>

Open in new window


The <CENTER> tag is deprecated.
0
 

Author Comment

by:johandrex
ID: 40512742
It doesn't work, it's only the text in the dropdowns that gets centered
0
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40512764
Update the below code:

<ul class="nav nav-pills">

Open in new window


to this:

<ul class="nav nav-pills" align="center">

Open in new window

0
 

Author Comment

by:johandrex
ID: 40512816
Still the same
0
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40512842
try this one:

<ul class="nav nav-pills" style="margin-left:40%;">
0
 
LVL 22

Expert Comment

by:Mrunal
ID: 40513136
add the same via CSS like:

<div class="cAlign">
you code
</div>

Open in new window


CSS Code:

.cAlign
{
text-align: center;
}

Open in new window


OR (if above code not works)

.cAlign
{
text-align: center !important;
}

Open in new window

0
 

Author Comment

by:johandrex
ID: 40513259
Still not working but "<ul class="nav nav-pills" style="margin-left:40%;">" worked, exept that it isn't placed in the middle in any percentage
0
 
LVL 58

Expert Comment

by:Gary
ID: 40513472
You really need an identifier for this particular UL but the code is depending on your markup

ul {
margin:0 auto
}

Open in new window

0
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40514359
In nav or nav-pills class add text-align="center" code in css. that will center the text.
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40514368
and in nav-pills class use the below code and change imgurl.png to your image or if you are not using any image for li then delete the code.

.nav-pills li{
	list-style-type: none;
	list-style-position: inside;
	list-style-image: url(imgurl.php);
	padding-bottom: 10px;
}

Open in new window

0
 
LVL 13

Expert Comment

by:Jesus Rodriguez
ID: 40515019
try "<ul class="nav nav-pills center" >
0
 

Author Comment

by:johandrex
ID: 40515090
If I'd have a custom.css file, where in the code should I change to get it in the middle?
/* Overriding some */

/* Fixing the lightbox */
.input-group .form-control {
	z-index: 0;
}

/* Modifications for sticky footer */
html {
	position: relative;
	min-height: 100%;
}
body {
	margin-bottom: 130px;
	background: b3d4fc;
}
.sticky-footer {
	font-family: 'Segoe UI', Tahoma, Segoe UI, Arial, sans-serif;
	position: absolute;
	bottom: 0;
	height: 80px;
	background-color: #3b5998;
	width: 100%;
	padding-top: 10px;
	border-top: 1px solid rgb(211, 211, 211);
	margin-top: 50px;
}

.sticky-footer, .sticky-footer a {
	color: #FFFFFF;
}

.sticky-footer a:hover {
	color: #444;
}


/* Helper classes */
.shadow {
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
	color: white;
}

.white, .white a {
  color: #fff;
}

.red {
	color: #c41745;
}

.green {
	color: #17C41E;
}

.inline {
	display: inline;
}

.center {
	text-align: center;
}

.clickable {
	cursor: pointer;
}

.table-fixed-full {
	table-layout: fixed;
	width: 100%;
}

.table-statistics tr td:first-child {
	font-weight: bold;
}

.no-underline, .no-underline:hover{
	text-decoration: none;
}

.panel-heading, .panel-body {
	word-break: break-all;
}

.glyphicon-large {
	font-size: 80px;
}


.opc  {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.opc:hover {
    opacity: 1;
}

.media .media-body .media-span-opacity {
	opacity:0;
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.media:hover .media-span-opacity {
	opacity: 1;

}

/* Category banner */
.panel-fixed {
	height: 150px;
}


/* No margin class */
.no-margin {
	margin: 0;
}

/* Overridez */
.panel {
	margin-bottom: 10px;
	border-radius: 0px;
}

.navbar-static-top {
	-webkit-box-shadow: 0px 0px 0px 0px rgba(73, 73, 73, 0.5);
	-moz-box-shadow: 0px 0px 0px 0px rgba(73, 73, 73, 0.5);
     text-align:left;
	box-shadow: 0px 0px 0px 0px rgba(73, 73, 73, 0.5);
	border: 0;
	background: #3b5998;
}
.navbar-no-margin {
	margin: 0;
}

.navbar-default .navbar-nav>li>a {
	color: #FFFFFF;;
}

.navbar-default .navbar-nav>li>a:hover {
	color: #FFFFFF;
}

.navbar-nav>li>.dropdown-menu {
	margin-left: -1px;
}

.dropdown-menu {
	background-color: #3b5998;
	border-top: 0;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
	color: #FFFFFF;
	background-color: #FD6C6C;
}

.dropdown-menu>li>a {
	padding: 8px 20px;
	color: #FFFFFF;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	background-color: #FD6C6C;
	color: #FFFFFF;
}

.navbar-default .navbar-brand {
	color: #FFFFFF;
	font-family: 'Segoe UI', Tahoma, Segoe UI, Arial, sans-serif;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
	color: #A1A1A1;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
	color: #FFFFFF;
	background-color: #1E1E1E;
}

.form-control:focus {
	border-color: #EDACAC;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255, 0, 0, 0.35);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255, 0, 0, 0.35);
}

a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
	background-color: #FD6C6C;
	border-color: #FD6C6C;
}

.btn-group>.btn-group:first-child>.btn:last-child, .btn-group>.btn-group:first-child>.dropdown-toggle, .btn-group>.btn-group:last-child>.btn:first-child {
	border-radius: 0;
}

/* input labels */
.input-label-online {
	background-color: #5cb85c;
	color: white;
	border-color: #5cb85c;
}

.input-label-offline {
	background-color: #d9534f;
	color: white;
	border-color: #d9534f;
}

/* Server tables */

.server td {
	padding: 2px;
}

.server .banner {
	width: 468px;
	height: 60px;
}

.server .footer {
	vertical-align: top;
	width: 100%;
}

.vip-shadow {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(230, 39, 39, 0.85);
	-moz-box-shadow: 0px 0px 5px 0px rgba(230, 39, 46, 0.85);
	box-shadow: 0px 0px 5px 0px rgba(230, 39, 46, 0.85);
}

/* Responsive youtube videos */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Social Icons */
.navbar-social {
	margin-top: 10px;
	margin-bottom: 5px;
}
.navbar-social a {
	margin-right: 5px;
	margin-left: 5px;
}
.navbar-social a:nth-child(1) {
	color: #3B579D;
}
.navbar-social a:nth-child(2) {
	color: #1AB2E8;
}
.navbar-social a:nth-child(3) {
	color: #DD4B39;
}

/* Index container */
.index-container {
	font-family: 'Segoe UI', Tahoma, Segoe UI, Arial, sans-serif;
	font-weight: 100;
	width: 100%;
	height: auto;
	background: url('../images/index.jpg');
	color: white;
	margin-bottom: 50px;
	padding: 50px 0px 50px 0px;
	-webkit-box-shadow: 0px 1px 20px 0px rgba(73, 73, 73, 0.5);
	-moz-box-shadow: 0px 1px 20px 0px rgba(73, 73, 73, 0.5);
	box-shadow: 0px 1px 20px 0px rgba(73, 73, 73, 0.5);
}

.index-title {
	font-size: 72px;
}

.index-text {
	font-size: 24px;
	margin-bottom: 50px;
}


/* Pagination style */
.new-pagination {
	list-style-type: none;
	padding: 0;
	margin: 25px 0 0 0;
}

.new-pagination li {
	display: inline;
}

.new-pagination li a  {
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #999;
	margin-right: 5px;
}

.new-pagination li.active a, .new-pagination li a:hover {
	border: 1px solid #FD6C6C;
	color: #FD6C6C;
	text-decoration: none;
}

.new-pagination li.disabled a {
	cursor: not-allowed;
}

/* Server list buttons */
span.tag  {
	padding: 2px 6px;
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #999;
	margin: 5px 5px 0 0;
	font-size: 12px;
	display: inline-block;
}

span:hover.tag {
	border: 1px solid #FD6C6C;
	color: #FD6C6C;
	text-decoration: none;
}

@media only screen and (max-device-width: 700px), only screen and (device-width: 700px) and (device-height: 700px), only screen and (width: 700px) and (orientation: landscape), only screen and (device-width: 700px), only screen and (max-width: 700px) {
	.index-title {
		font-size: 68px;
	}

	.index-text {
		font-size: 18px;
		margin-bottom: 50px;
	}
}

@media only screen and (max-device-width: 350px), only screen and (device-width: 350px) and (device-height: 350px), only screen and (width: 350px) and (orientation: landscape), only screen and (device-width: 350px), only screen and (max-width: 350px) {
	.index-title {
		font-size: 36px;
	}
}

Open in new window

0
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40515098
by doing this you are not able to do this?

<ul class="nav nav-pills center" >

Open in new window

0
 

Author Comment

by:johandrex
ID: 40515114
It sadly didn't work
0
 
LVL 58

Expert Comment

by:Gary
ID: 40515143
Do you have a link to the page or can you set up a test page.

Did you try http:#a40513472
0
 

Author Comment

by:johandrex
ID: 40515161
http://minecraftcommunity.org/
It's below the "Minecraft servers"
And yes I have tried all the options in this post
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40515182
Give the UL a specific max-width - in this case 580px is good and the solution I already posted. Also give it an ID, I am using mservers in this case

So

<ul class="nav nav-pills" id="mservers"> // here added the id to the UL
...

The style
ul#mservers {
    margin: 0 auto;
    max-width: 580px;
}

Open in new window

0
 

Author Comment

by:johandrex
ID: 40515198
Nice it worked! Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40515208
Remove the <center> tag - it's obsolete as already mentioned
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now