JSFiddle: http://jsfiddle.net/BL5vd/
I'm trying to create a responsive menu with 4 links. The links should be VERTICALLY centered and the a should be larger as the li.
line-height: 100% on the ul li a doesn't work, unfortunately. Ideas?
here is a FIDDLE
html:
<ul>
<li><span>Link</span>
</li>
<li><span>Link</span>
</li>
<li><span>Link</span>
</li>
<li><span>Link</span>
</li>
</ul>
css (changed part):
ul li a {
display: block;
text-align: center;
background: orange;
overflow: hidden;
height: 100%;
}
ul li a span {
display: block;
position: relative;
top: 50%;
}
Try this using table-cell. Fiddle
CSS
ul {
height: 100%;
list-style: none;
display:table;
width:100%;
}
ul li {
height: 25%;
display:table-row;
}
ul li a {
display: table-cell;
text-align: center;
background: orange;
vertical-align:middle;
border-bottom:1px solid white;
}
Related
I have an unordered list item element with some list items and links. Above each link I would like to show an image. I would like the text to be horizontally aligned below the relevant image.
<ul>
<li>Accounts</li>
<li>Search</li>
<li>Bag</li>
</ul>
This is my CSS
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li a:before {
display: block;
width: 50px;
height: 50px;
background: url('http://placehold.it/50x50') no-repeat center;
content: '';
margin-bottom: 5px;
}
Just add text-align:center to the li and a left/right margin of auto for the pseudo element and then you can go one step further and set a width for the li so that they're all the same width regardless of the length of the text.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
width:75px;
display: inline-block;
text-align:center;
}
li a {
display:block;
}
li a:before {
display: block;
width: 50px;
height: 50px;
background: url('http://placehold.it/50x50') no-repeat center;
content: '';
margin:0 auto 5px;
}
<ul>
<li>Accounts</li>
<li>Search</li>
<li>Bag</li>
</ul>
An alternative solution using flexbox.
You can make the a element a flex container, and center the content horizontally.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
a {
display: flex;
flex-direction: column;
align-items: center;
min-width: 4em;
}
li a:before {
display: block;
width: 50px;
height: 50px;
background: url('http://placehold.it/50x50') no-repeat center;
content: '';
margin-bottom: 5px;
}
<ul>
<li>Accounts</li>
<li>Search</li>
<li>Bag</li>
</ul>
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
Trying to position a horizontal menu over an image.
I have it positioned over the image as of now, but I can't seem to center the li elements to the middle of the screen.
Here is the HTML:
<div id="banner">
<img src="security-people-interior.jpg"/>
</div>
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>About</li>
<li>Products</li>
<li>Monitoring</li>
<li>Testimonials</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</div>
The CSS3:
#banner {
display: block;
margin-left: auto;
margin-right: auto;
}
img, #banner {
width: 100%;
}
#menu-outer {
background: url(images/bar-bg.jpg) repeat-x;
z-index: 100;
position: absolute;
top: 25%;
width: 100%;
}
#menu {
????
}
ul#horizontal-list {
/*list-style: none;*/;
}
ul#horizontal-list li {
display: inline;
}
#menu a {
text-decoration: none;
margin: 10px;
float: left;
color: black;
padding: 2px 5px;
text-align: center;
white-space: nowrap;
}
#menu a:hover {
color: #fff;
background: red;
}
The only thing I am able to use is float in #menu{} in the css, but obviously float doesn't have centering.
CSS3 isn't my particular favourite to deal with, so any help would be greatful thanks.
Here are two options:
Set the display of the #horizontal-list element to inline-block and then use text-align: center on the parent element in order to center it.
Example Here
#menu {
text-align: center;
}
#horizontal-list {
display: inline-block;
}
Alternatively, using flexboxes:
Example Here
#menu {
display: flex;
justify-content: center;
}
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/
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }