I have had trouble centering the unordered list I am using for my navigation. I have looked at other advice and tried to fix it so now my code is a hot mess. I cannot figure out for the life of me what is going wrong. All the solutions I have tried still do not center the list in the window. adding the overflow:visable stretch it out but not 100% and it does not expand when the window grows.
#navbar {
position: fixed;
top:-17px;
margin-bottom: 10px;
font-family:Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
#navbar ul > li {
display: inline-block;
float: none;
color:white;
font-size: 14px;
margin-right: 35px;
margin-left: 35px;
padding: .2em 1em;
overflow:visible;
}
Is this what you are looking for?
http://jsfiddle.net/talymo/6FGbw/
#navbar {
position:fixed;
list-style:none;
margin:0;
padding:0;
width:100%;
text-align:center;
}
#navbar li{
padding:10px;
display:inline-block;
}
<ul id="navbar">
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
</ul>
what if you add this to your code:
text-align: center
One thing you can try is to put the list inside a div and add the style text-align:center; to the div.
Afterwards just remove the position:fixed; style from #navbar.
or you could wrap the list in <center> </center> tags.
Hope this helps :)
Try:
#navbar ul {
text-align: center;
}
JSFiddle: http://jsfiddle.net/zgwxP/
Assuming your navbar has some set width you can use text-align:center on your ul
jsFiddle
/* Give the navbar a width */
#navbar {
left:0;
right:0;
}
#navbar ul {
padding:0;
text-align:center;
}
Related
I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.
Here is my code:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><span>Om kampanjen</span></div></li>
<li id="node_id_65"><div><span>Fakta om inneklima</span></div></li>
<li class="lastli" id="node_id_66"><div><span>Statistikk</span></div></li>
</ul>
<!-- Top menu content: END -->
</div>
UPDATE
I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion.
But the list items are still floated left within the ul.
Do I need Javascript to accomplish this?
From http://pmob.co.uk/pob/centred-float.htm:
The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.
Code
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
<ul>
<li>Button 1</li>
<li>Button 2's a bit longer</li>
<li>Butt 3</li>
<li>Button 4</li>
</ul>
</div>
This works for me. If I haven't misconstrued your question, you might give it a try.
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1 </li>
<li>Amazon 2 </li>
<li>Amazon 3</li>
</ul>
</div>
With CSS3 flexbox. Simple.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
This is the simplest way I found. I used your html. The padding is just to reset browser defaults.
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64">
<div><span>Om kampanjen</span>
</div>
</li>
<li id="node_id_65">
<div><span>Fakta om inneklima</span>
</div>
</li>
<li class="lastli" id="node_id_66">
<div><span>Statistikk</span>
</div>
</li>
</ul>
<!-- Top menu content: END -->
</div>
Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Try this:
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
Do it like this :
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
And the CSS:
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}
Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.
It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
Demo - http://codepen.io/grantex/pen/InLmJ
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Menu</li>
<li>Others</li>
</ul>
</div>
.navigation {
max-width: 700px;
margin: 0 auto;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 10px;
width: 100%;
}
Omg so much cleaner.
Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.
To align text and inline level elements within a block level element use text-align:center;. So all together something like...
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
... should work.
The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...
ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods
(".").
I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)
/*ul wrapper*/
.gallery_wrapper{
width: 958px;
margin: 0 auto;
}
/*ul list*/
ul.gallery_carrousel{
display: inline-block;
margin: 0 auto;
}
.contenido_secundario li{
float: left;
}
i use jquery code for this. (Alternative solution)
$(document).ready(function() {
var margin = $(".topmenu-design").width()-$("#topmenu").width();
$("#topmenu").css('margin-left',margin/2);
});
div {
text-align: center;
}
div ul {
display: inline-table;
}
ul as inline-table fixes the with issue. I used the parent div to align the text to center.
this way it looks good even in other languages (translation, different width)
#Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.
[it was set up using robusto's sample code]
HTML:
<div id="centerDiv">
<ul class="centerUL">
<li><img src="http://placehold.it/200x150> </li>
<li><img src="http://placehold.it/200x150"> </li>
<li><img src="http://placehold.it/200x150"></li>
</ul>
</div>
CSS:
div#centerDiv {
width: 700px;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
}
.centerUL li {
display: inline;
text-align: center;
}
ul{margin-left:33%}
Is a decent approximation on big screens. Its not good, but a good dirty fix.
What worked for me was just setting the li item's display property to inline-flex:
li {
display: inline-flex;
}
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
You may choose to add justify-content: center to the lis, and padding: 0 to the ul to straighten things out.
.topmenu-design
{
display: inline-table;
}
That all!
I have created a menu but cannot solve this issue so I am hoping that someone can help me:(
Problem my last li (anchor tag) inside my menu keeps collapsing underneath my menu and no matter I do problem persists. In Firefox looks fine but in every other browser it is a disaster... I have tried: adding overflow:hidden; to my menuwrapper,tried adding a "clear both" div after last ul tag,added display:inline-block to li tags,and a lot of other approaches to my problem but nothing works:( I didn't set explicit width to my anchor tags (I really don't want to do that!). In Firefox looks like perfect: http://robertpeic.com/kyani/template/menu.png
in other browsers look like this: (notice that there is no blue button because it came bellow my menu) http://robertpeic.com/kyani/template/menu2.png
I dont want this:http://robertpeic.com/kyani/template/menu3.png
Question: How can I prevent my li's from going below my menu even if there is no room? Thanks for your help!!
Link to my menu
Relevant CSS looks like this:
.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}
Html looks like:
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
I added overflow:hidden to .mainmenu and changed the padding for .mainmenu ul li a and it worked for me.
.mainmenu
overflow:hidden;
.mainmenu ul li a
padding:0 22px 0 23px;
I have found that the best way to get a consistent full width menu bar with cross browser compatibility is to force the widths of the LIs. Although it isn't a very forward compatible. it is the best way I have found for maintaining the integrity of the visual design.
Set the width of the mainmenu div to 910px. It will solve your problem and also not show any white spacing
Your entire html will be, as given below. While testing your code,I found, if I omit the first line DocType... the menu gets mangled in IE . In Chrome it works fine. So AFAIK, Your issue was with Doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.mainmenu
{
display: block;
width: 906px;
margin: 0px auto;
height: 42px;
background-image: url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat: repeat-x;
position: relative;
margin-top: -15px;
z-index: 160;
}
.mainmenu ul
{
list-style-type: none;
}
.mainmenu ul li
{
float: left;
}
.mainmenu ul li a
{
text-decoration: none;
display: block;
font-family: "Palatino Linotype" , "Book Antiqua" ,Palatino,FreeSerif,serif;
font-size: 20px;
padding: 0 20px ;
color: #383838;
border-left: 1px solid #dedede;
height: 42px;
line-height: 42px;
z-index: 100;
}
.mainmenu ul li a:hover
{
color: #ffffff;
}
.mainHover
{
background-image: url('http://robertpeic.com/kyani/template/hoverm.png');
display: block;
position: relative;
background-repeat: repeat-x;
z-index: -50;
}
</style>
</head>
<body>
<div class="mainmenu">
<ul>
<li>Pocetna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div>
</body>
</html>
I feel so dumb right now :) To prevent my li from going below I've only wrapped my menu with other div and set that div to overflow hidden and it worked perfect! THX everybody for your help!!!
CSS now looks like:
.mainmenu{
display:block;
width:903px;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.menuwrap{
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
width:900px;
overflow:hidden;
}
HTML looks like this:
<div class="menwrap">
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
</div><!--/menuwrap-->
I've got a div that is set to 100% and inside that another div which is centred and set to 883px.
The navigation is a list but if I apply the float:right element to this element it reversed the order of the list. Sure I could change the order in the code but there must be a better way?
<div id="navigation"><!-- START NAVIGATION -->
<ul class="navigation">
<li>home</li>
<li><img src="images/navline.png" align="right">portfolio</li>
<li>blog</li>
<li>get in touch</li>
</ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>
And the CSS...
#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}
#navigation ul {
width:883px;
margin:0px auto;
}
ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}
#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}
Can anyone help show me the error of my ways?
Floating to the right reverses the elements. This is the expected behavior.
If you want the menu aligned to the right, then you need to make ul element floating to the right but the li elements inside, must have a float left.
#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}
#navigation ul {
width:883px;
margin:0px auto;
}
ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
float: right;
}
#navigation li {
float: left;
padding: 0px 10px;
}
#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
}
In this case, the menu still doesn't appear aligned to the right because you specified width:883px; to the ul element. If you want it aligned to the right then simply remove this width.
I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.
Here is my code:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><span>Om kampanjen</span></div></li>
<li id="node_id_65"><div><span>Fakta om inneklima</span></div></li>
<li class="lastli" id="node_id_66"><div><span>Statistikk</span></div></li>
</ul>
<!-- Top menu content: END -->
</div>
UPDATE
I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion.
But the list items are still floated left within the ul.
Do I need Javascript to accomplish this?
From http://pmob.co.uk/pob/centred-float.htm:
The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.
Code
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
<ul>
<li>Button 1</li>
<li>Button 2's a bit longer</li>
<li>Butt 3</li>
<li>Button 4</li>
</ul>
</div>
This works for me. If I haven't misconstrued your question, you might give it a try.
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1 </li>
<li>Amazon 2 </li>
<li>Amazon 3</li>
</ul>
</div>
With CSS3 flexbox. Simple.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
This is the simplest way I found. I used your html. The padding is just to reset browser defaults.
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64">
<div><span>Om kampanjen</span>
</div>
</li>
<li id="node_id_65">
<div><span>Fakta om inneklima</span>
</div>
</li>
<li class="lastli" id="node_id_66">
<div><span>Statistikk</span>
</div>
</li>
</ul>
<!-- Top menu content: END -->
</div>
Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Try this:
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
Do it like this :
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
And the CSS:
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}
Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.
It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
Demo - http://codepen.io/grantex/pen/InLmJ
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Menu</li>
<li>Others</li>
</ul>
</div>
.navigation {
max-width: 700px;
margin: 0 auto;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 10px;
width: 100%;
}
Omg so much cleaner.
Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.
To align text and inline level elements within a block level element use text-align:center;. So all together something like...
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
... should work.
The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...
ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods
(".").
I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)
/*ul wrapper*/
.gallery_wrapper{
width: 958px;
margin: 0 auto;
}
/*ul list*/
ul.gallery_carrousel{
display: inline-block;
margin: 0 auto;
}
.contenido_secundario li{
float: left;
}
i use jquery code for this. (Alternative solution)
$(document).ready(function() {
var margin = $(".topmenu-design").width()-$("#topmenu").width();
$("#topmenu").css('margin-left',margin/2);
});
div {
text-align: center;
}
div ul {
display: inline-table;
}
ul as inline-table fixes the with issue. I used the parent div to align the text to center.
this way it looks good even in other languages (translation, different width)
#Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.
[it was set up using robusto's sample code]
HTML:
<div id="centerDiv">
<ul class="centerUL">
<li><img src="http://placehold.it/200x150> </li>
<li><img src="http://placehold.it/200x150"> </li>
<li><img src="http://placehold.it/200x150"></li>
</ul>
</div>
CSS:
div#centerDiv {
width: 700px;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
}
.centerUL li {
display: inline;
text-align: center;
}
ul{margin-left:33%}
Is a decent approximation on big screens. Its not good, but a good dirty fix.
What worked for me was just setting the li item's display property to inline-flex:
li {
display: inline-flex;
}
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
You may choose to add justify-content: center to the lis, and padding: 0 to the ul to straighten things out.
.topmenu-design
{
display: inline-table;
}
That all!
Trying to learn a bit of CSS and I want a horizontal navbar and I am using ul and li to build it. I would like all the 'buttons' to have the same width, is that possible with just CSS?
Thanks
Not exactly sure what you mean by same width. You just set it with pixels on the link? What are your constraints? do you know the list width? or the link width?
<style type="text/css">
.menu { margin:0px auto; padding:0px; list-style-type:none; }
.menu li { margin:0px auto; padding:0px; float:left; }
.menu li a { display:block; width:200px; }
</style>
<ul class="menu">
<li>Section1</li>
<li>Section1</li>
<li>Section1</li>
</ul>
Yup,
ul li
{
display: block;
float: left;
width: 100px;
}
ul
{
padding: 0px;
list-style-type: none;
}
Something like this. (Not tested);