Solved

How do you center this code?

Posted on 2014-12-22
19
138 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 14

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 14

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 14

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

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 14

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

895 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

11 Experts available now in Live!

Get 1:1 Help Now