I've been fooling around with HTML/CSS recently, and I'm trying to vertically align the text in an li so that it is in the center. I've seen this question (or some variation of it) asked a bunch of times, so I apologize in advance for asking a question I'm sure you're tired of seeing, but I can't get any of the suggested solutions to work. I'm also trying to avoid setting a specific height/line-height for the li, since I'd like this to adjust to the size of the screen.
Here's the HTML:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Experience</li>
<li>Contact</li>
</ul>
Here's the CSS:
#nav {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: block;
height: 100%;
}
#nav li a:hover {
background: #ccc;
}
I also have this fiddle set up in case you'd like to mess around with it and see if you can get it working. Thanks!
You can just make the line-height of #nav li 25% of the viewport height like so
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
line-height: 25vh; /* this is the only thing you need to add */
}
It's very simple and short and will work with any changes to the text (like font-size etc) or the list. It doesn't matter how many items you add or remove from the list or what changes you make to the height of the #nav or its list items.
See the first working revision of your jsFiddle ;)
Set display: table; on your li
and
display: table-cell;
vertical-align: middle;
on your a
final styles:
#nav li {
display: table;
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
Rev 6 of your fiddle
Try these changes in your css
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
display: table; /* added */
}
#nav li a {
display: table-cell; /* changes from block to table-cell */
vertical-align: middle; /* added */
height: 100%;
}
See the working example here http://jsfiddle.net/t6ryfqzk/7/
Try making your li an inline-block if you want them next to eachother, or as block if you want them underneath eachother. Make sure you give the li elements a fixed width, and set their text-align as centered.
Related
I have a block of links:
<ul>
<li>Link 1</li>
<li><a class="icon26 icon2">Link 2</a></li>
</ul>
Each link has an accompanying icon. What I'm trying to achieve is 2 things:
1) To centre both the image and the text within the LI tag
2) To block the A tag so it fills the LI tag
Here's what I'm trying to do:
I can achieve 1 or 2 but not both at the same time - any ideas?
At present i'm using a existing sprite solution for the link - this may not be ideal, but it can be changed if a solution is found. Here's the CSS:
.icon26:before
{
background:url(/assets/images/sprite26.png) no-repeat 0 0;
content:"";
display:block;
float:left;
height:2.6rem;
width:2.6rem;
}
.icon1:before
{
background-position:-32px -2px;
}
Here's the remaining CSS for the UL structure:
#nav ul
{
width:100%;
}
#nav ul li
{
float:left;
width:33.33%;
}
#nav a
{
display:block;
line-height:4.6rem;
}
#nav a:before
{
margin:1rem 0.5rem 1rem 0;
}
It's perfectly possible. Remove the float, and use a combination of display: inline-block and vertical-align: middle instead.
Here's the fiddle.
Here's the relevant code:
.icon26:before {
background: url(/assets/images/sprite26.png) no-repeat 0 0;
content: "";
display: inline-block; /* <-- instead of float: left */
vertical-align: middle; /* <-- add to vertically center inline blocks */
height: 2.6rem;
width: 2.6rem;
}
#nav ul li {
float: left;
width: 33.33%;
text-align: center; /* <-- add this to horizontally center inline items */
}
Make the <A> position: absolute; top:0; left: 0;. And make icon and link center align same as you did. This will work.
You can use display: table-cell; property to center align vertically & set width: 1% for full width (justified) menu items.
.nav {
list-style: none;
padding-left: 0;
}
.nav > li {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.nav > li > a {
display: block;
padding: 10px;
text-align: center;
}
Example: http://codepen.io/neilhem/pen/ramzXG
Warning: This method is buggy in Safari 8.0
I'm making a responsive site, so most of the elements I'm working with have unknown heights. Here's what I got...
<div class="main">
<div class="submenu">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</div>
CSS:
.main {
background: #0e0e0e;
width: 80%;
margin: auto;
position: relative;
}
.main .submenu {
background: #e62e7a;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15%;
}
.submenu ul {
background: pink;
float: left;
height: 100%;
}
.submenu ul li {
display: block;
float: left;
}
.submenu ul li a {
background: rgba(0,0,0,0.5);
padding: 8px;
}
Okay. So I have div with a proportional size inside a div with a changing height and width. I have two problems:
1) How do I vertically center the anchors at the end of the code inside the .submenu div? Apparently percentage line height doesn't work, and I'm not sure why, but the table display trick does not work either.
2) Also in the anchors, the padding escapes its parent boundaries. The text is perfectly at top, but the padding transparently black background of the anchors is escaping the parent. Why is that?
P.S. as for .main height I added a div inside with a padding-top of 50% to set its height relatively to its width.
This article may be able to help: http://css-tricks.com/centering-in-the-unknown/
Basically, by using display: table-cell;, you can use vertical-align: middle; on your content.
Here's a JSFiddle updated to use this method:
http://jsfiddle.net/yVn7Z/
Updated CSS:
html, body {
margin: 0;
height: 100%;
width: 100%;
display: table;
}
.main {
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main .submenu {
background: pink;
margin: 0 auto;
display: table;
}
.submenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.submenu ul li {
display: table-cell;
}
.submenu ul li a {
background: rgba(0, 0, 0, 0.5);
padding: 8px;
display: block;
}
I have small problem with some design.
I have this very simple html:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is just a small part of a bigger widget. To make thsi widget work, I need at least this css:
div {
position: relative;
width: 400px;
height: 200px;
}
ul {
z-index: 99;
}
li {
display: block;
float: left;
width: 16px;
height: 16px;
}
Now I want to put list down into the midst of div. There is no problem with putting it down, but it is impossible for me to put it into middle. List can have any number of items.
JSfiddle: http://jsfiddle.net/MBxNU/1/
So far, I tried for example:
ul {
width: 100%;
display: block;
text-align: center;
}
But it didnt work and I have no clue why.
If you could give me some help, I'd appreciate it.
Your code with text-align: center doesn't work because you have floated items inside ul. You can use display: inline-block instead of float:
li {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/
Here you are ;)
div {
position: relative;
left: 20px;
top: 20px;
background-color: #EEE;
width: 400px;
text-align: center;
height: 200px;
}
ul {
padding: 0;
display: inline-block;
z-index: 99;
list-style: none inside;
}
li {
float: left;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
So the main idea is to set text-align: center for parent div and display: inline-block for ul, that's it )
I need to make a menu that on mobile has the links expand to full width. Something similar to this wireframe.
My code so far:
HTML
<div id="shortcuts">
<ul>
<li>Categories</li>
<li>Archives</li>
</ul>
</div>
CSS
#header {
width: 100%;
height: 180px;
background-color: #666;
color: #fff;
}
#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }
#shortcuts ul {
display: table;
width:100%;
height: 180px; /* for testing only */
}
#shortcuts ul li {
list-style: none;
display: table;
height: 60px;
width:100%;
display: block;
vertical-align: middle;
background-color: red; /* for testing only */
border: blue 3px solid; /* for testing only */
}
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: table-cell;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
This is my result so far (colors used only for testing)
If I change the #shortcuts ul li a to display: block;, I can get the desired width. But then the text will not center vertically.
Not a duplicate of CSS Positioning anchor inside li vertically aligned because that is only partial part to vertically align the text. Does not answer how to make the link expand 100% width.
You need to use both "display: block;" and "line-height:60px;" for "#shortcuts ul li a {"
Updated code:
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: block;
line-height:60px;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
Please refer the fiddle :- http://jsfiddle.net/aasthatuteja/6WEW6/
I am having difficulty with centering the navigation bar on this page.
I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it.
#nav ul {
display: inline-block;
list-style-type: none;
}
It should work, I tested it in your site.
Add some CSS:
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
If you have your navigation <ul> with class #nav
Then you need to put that <ul> item within a div container. Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block;
that should center it.
Just add :
*{
margin: 0;
padding: 0;
}
nav{
margin: 0 auto;
text-align: center;
}
The best way to fix it I have looked for the code or trick how to center nav menu and found the real solutions it works for all browsers and for my friends ;)
Here is how I have done:
body {
margin: 0;
padding: 0;
}
div maincontainer {
margin: 0 auto;
width: ___px;
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
ul li {
margin-left: auto;
margin-right: auto;
}
and do not forget to set doctype html5
Your nav div is actually centered correctly. But the ul inside is not. Give the ul a specific width and center that as well.
You could also use float and inline-block to center your nav like the following:
nav li {
float: left;
}
nav {
display: inline-block;
}