Solved

How do you center this code?

Posted on 2014-12-22
19
162 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

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
 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

717 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