.list{
list-style: none;
display: inline-block;
text-align: left;
margin:0;
padding:0;
margin-left:-20px;
}
.list > li {
display: inline-block;
width: 100px;
height : 100px;
border: 1px solid black;
margin: 0;
padding: 0;
margin-left: 20px;
margin-bottom: 20px;
}
<div style="text-align:center">
<ul class="list">
<script>
for (var i=0;i<60;i++)
document.write("<li></li>");
</script>
</ul>
</div>
I am trying to make the UL center in the DIV.
Requirements:
UL should be just large enough to hold the LI elems.
LI elems should align left within the UL (either through float: left, text-align: left or otherwise)
Tried these but failed:
Why won't my Div center itself in its parent?
Centering an UL inside a DIV
How to horizontally align ul to center of div?
#mark's solution does not work:
Remove
text-align: left;
from .list
Updated fiddle here.
by default, ul element is like a block, that means it will take 100% width of it's parent.
So if you want it to be center, you must set its width to a specific pixel or change the display attribute:
.list{display:inline-block}
Your containing element has to have a width defined; you can't just say text-align: center for it to work.
Do this:
Updated Fiddle
Essentially you're just defining a few properties on the containing element and took out the margin-left: -20px. in your code.
Related
I'd like to have an image slideshow with a next button that forms the entire right border of the image. Would it be possible to have the words "NEXT" display in the center of the red area, instead of on the same line as the image?
<ul>
<li></li>
<span>NEXT</span>
</ul>
li {
display: block;
width:200px;
height:100px;
display: inline-block;
border:1px solid;
}
span {
background-color:red;
padding-top:100px;
}
Fiddle here:
http://jsfiddle.net/PUQNg/217/
You have a few things wrong with your HTML and CSS that you should correct:
span is not a valid child of ul, make this a li instead
There's no point having display: block; and display: inline-block; on li, only the last display property will be used
To centralise the text in this case I would use a line-height set to the height of the li.
li {
border: 1px solid #000000;
display: inline-block;
height: 100px;
vertical-align: middle;
width: 200px;
}
.next {
background-color: red;
border: 0;
line-height: 100px;
width: auto;
}
<ul>
<li></li>
<li class="next">NEXT</li>
</ul>
Sorry for asking stuff that's already been explained a lot but none of the solutions that I saw so far on StackOverflow is actually working for me(table-cell, text-align, vertical-align...nothing).
Here's the deal: all of my code is inside a #box div which is the one dealing with the centering and containing all the elements. The first div after this is #menu and it's like this:
<div id="menu">
<img src="img/logo.jpg" alt="logo">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
Nothing special actually, it's pretty simple. My CSS looks like this:
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 1280px; }
#menu img {
float: left; }
#menu ul {
float: right;
list-style: none;
line-height: normal; }
#menu li {
display: table-cell;
padding-left: 20px;
vertical-align: middle; }
Be ware that I'm using a basic CSS Reset to avoid most problems when I'll go test cross-browsing.
The problem here is no matter which of the solutions I try from StackOverflow, only the IMG or the UL vertically centers or they're slightly non-aligned.
What I'm asking for is: what's the BEST WAY today to do such a simple task with html/css only(the img size won't change) and have a logo image and a menu on its right perfectly center on the vertical space in a div with known width and height?
I obviously cleaned cache, refreshed, did everything so I'm sure changes are taking effect...I'm just missing something really stupid probably but I really can't center both.
To better show what I want I made this, this should be really a basic menu setup yet something ain't working as expected. Here's my desired outcome, just remember I didn't write any rule to move img and #menu ul from the left/right borders because, obviously, right now they're on the side borders...I'll give margins later.
perhaps this is what you want? Fiddle
you just need to make the li to inline-block, add line-height to the div #menu with the same value as height, and add style vertical-align: middle to the img, here's the full CSS needed with the same HTML as yours
#menu {
background-color: #babadc;
height: 100px;
line-height: 100px;
margin: 0 auto;
width: 1280px;
}
#menu img {
height: 50px;
vertical-align: middle;
}
#menu ul {
margin: 0;
float: right;
list-style: none;
}
#menu li {
display: inline-block;
padding-left: 20px;
/*vertical-align: middle; this is not needed because already declare line-height in parent*/
}
note that the vertical-align: middle for image work because it's following the other inline or inline-block element, and the inline or inline-block element is in the middle because of the line-height that's set on the #menu. And you also need to make sure that the container width is always greater then the total of image width and ul width for this to work
If the height is known and fixed, I would suggest
ensure that there is no top/bottom padding/margins on ul, li and a. Set line-height to 1 on a
manually set top margins for img and ul based on the height of nav and height of images. ul height will be your font-size once all extra padding is removed. (margin-top = nav height minus half of image/ul height)
See this fiddle: http://jsfiddle.net/no5wo77a/1/
Maybe you can work from this?
Fiddle
HTML
<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg" alt="logo" height="80%" width="auto">
CSS
body {
outline: 0;
margin:0;
}
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 100%;
position: relative;
}
#menu img {
float: left;
top: 10%;
position: absolute;
}
#menu ul {
float: right;
list-style: none;
line-height: normal;
background-color: #FF0000;
height: 20px;
margin-top: 40px;}
#menu li {
display: table-cell;
padding-left: 20px;
}
Just look at the fiddle....
Here is my html:
<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li>1st button</li>
<li>2nd button</li>
<li>3rd button</li>
</ul>
I also attached an image if what I currently have. I tried adding display: table-cell;
vertical-align: middle; to the anchor tag class but it did not work I also tried adding a span around teh anchor tag with a class with: display: table-cell; vertical-align: middle; but that did not work either, in both cases button's heights were not constant.
How can I vertically center text and keep my buttons height and width the same?
Ended up going with the display:table-cell solution as it was the most cross browser....I did not like it at first because I had to hard code the width of my button instead of 100% but once I got past that it was a solid solution:
my li:
.header #sub_nav li {
display: table;
float: left;
font-size: 11px;
line-height: 12px;
margin-bottom: 12px;
margin-left: 12px;
width: 86%;
}
my a:
.header #sub_nav li a {
display: table-cell;
height: 45px;
vertical-align: middle;
width: 111px;
}
I Do something similar to what you're asking. Defining the parent as "display: table" and the element itself with "vertical-align:middle" & "display:table-cell" worked for me.
If you have only one item within the li (or div, etc), the easiest way is to set line-height to be the same as the element's height, and it will be vertically aligned. I have created a simple fiddle below, and hope this helps!
http://jsfiddle.net/fCkLJ/
li {
/* other styling */
height: 30px;
line-height: 30px;
}
Try:
li{
padding-top:20%;
padding-bottom:20%;
}
This will cause even padding top/bottom on the LI but if one LI wraps and another one doesnt it they will be different heights.
http://jsfiddle.net/VMCH6/1/
There are many ways, looks here
If you are using background-image, then you should set a fixed width height for the li.a element and use this hack for the a element:
li a {
height: 50px;
width: 300px;
margin: auto 0;
display: block;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
This is the working example (even with your image as background). The complete button will be clickable and the flexibility to be multiple lines:
http://jsfiddle.net/GqBAL/494/
Note: This is not 100% cross-browser, but is the best solution.
I dont have enough knowledge of HTML/CSS but i think it is Ok .
in this answer i have removed height from UL/LI and provided auto height , and in anchor <a> tag i have used padding , to display a bigger-height-centralized button .
CSS part is :
<style>
html , body , ul , li
{
margin:0;
padding:0;
}
html , body
{
width:100%;
height:100%;
}
ul
{
width:100%;
height:auto;
background-color:red;
}
li
{
width:33%;
height:auto;
display:inline-block;
background-color:green;
}
a
{
width:100%;
height:100%;
text-align:center;
display:block;
padding-top:10%;
padding-bottom:10%;
}
</style>
HTML part is :
<body>
<ul>
<li>tushar</li>
<li>tushar</li>
<li>tushar</li>
</ul>
</body>
I want to centre align the menus , I tried using text-align but still no result
Following is the html code:
<div id="menu" class="clearfix">
<ul>
<li>HOME</li>
<li>WATCH</li>
<li>TAGS</li>
<li>CHANNELS</li>
</ul>
<br style="clear:both">
</div>
And the css used:
#menu {
width: 100%;
margin-bottom: 2em;
margin-top: 5px;
border-top: 1px solid #333;
border-bottom: 1px solid #515152;
text-align: center;
background-image: url("./images/menu.gif");
}
#menu ul {
font: bold 11px Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
float: left;
display: inline;
background-color: black;
}
Any suggestions?
Thank You.
You have float:left on the li. Take that line out:
#menu li {
display: inline;
background-color: black;
}
Since you don't need float anymore, you can also get rid of the <br style="clear:both"> as it'll just put a blank line below the menu now.
Here's a tutorial on how to properly use float.
Floating is often used to push an image to one side or another, while
having the text of a paragraph wrap around it
Set
#menu ul{
text-align:center;
}
and then set
#menu li{
margin:0px auto;
}
This will leave top and bottom margins as 0px but will automatically detect the left and right margins and make them equal and centered.
Also, remove
float:left;
from
#menu li
I believe you are trying to center the contents of your #menu tag with the text-align:center. This won't work because you have the 'ul' inside it. What I would do is remove the text-align:center from the #menu tag.
Then in the '#menu ul' tag I would add:
margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */
In order for a block level element to be centered on a page you need to provide a width that is smaller than the width of the parent element it is nested in and then set the margin to be auto for the left and right sides.
I have an CSS issue with a menu.
Through CSS I´ve added padding to li's.
The li's have display: inline.
It works when I set to inline-block, but I want to know why it doesn't work with inline. In my understanding padding should work with inline elements.
HTML
<header>
<nav>
<ul id="mainmenu">
<li>Home</li>
<li>Users</li>
<li>Rankings</li>
<li>In the press</li>
<li>Blog</li>
</ul>
</nav>
</header>
CSS
body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }
Working demo
http://jsfiddle.net/4QLmp/
PS browser is Chrome Canary
The padding is there, but since the <li>s are defined as inline, they're aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:
header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}
so that the <ul>s get pushed down, you'll see the padding present. inline-block doesn't follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.
header nav li { display: inline; padding: 10px 5px; }
UPD:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, "the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property".