Please look at the following jsFiddle and alter appropriately. I basically want the text to be perfectly in the middle of the images height.
http://jsfiddle.net/e7AV9/1/
You could set it as a background image and center it there and then add a bit of left padding like this http://jsfiddle.net/e7AV9/5/
I'm partial to absolute positioning.
CSS
* {
font-family: Verdana;
font-size: 10px;
}
nav > ul li:nth-child(2) a:before {
position: absolute;
top: 9px;
left: -2px;
content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}
nav a {
color: #626262;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
width: 150px;
display: inline-block;
}
nav ul li {
position: relative;
display: inline-block;
list-style: none;
}
HTML
<nav>
<ul>
<li>Home</li>
<li>Community</li>
</ul>
</nav>
You could also put the image directly in the HTML and style it that way: http://jsfiddle.net/e7AV9/10/
Here's the problem with CSS:content:
I feel that we shouldn't use the content declaration at all. It adds
content to the page, and CSS is meant for adding presentation to the
page, and not content. Therefore I feel that you should use JavaScript
if you want to dynamically generate content. CSS is the wrong tool for
this job.
Another solution can be just to add vertical-align: top such as this example: http://jsfiddle.net/Vh6wP/.
Also here's a link on vertical-align: http://css-tricks.com/what-is-vertical-align/ for other values.
Related
I am trying to vertically align some text within a list li and having issues.
First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS:
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
}
I tried to see if there was a way of getting the text to align to the middle.
I tried:
vertical-align: middle;
which didn't work, so then I tried:
line-height: 50px;
which also did not work, so I tried:
display: table
which worked, but the image disappears from the list item....
Does anyone know of a way to get this to work?
The issue using list-style-image is that you cannot align with the text, the best thing to do is to use background-image for li element, and then use padding-left for your li elements.
Buggy Demo (The issue which you are facing)
Demo
ul li {
background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
}
ul {
margin: 50px;
}
you can have
<li><span style="top:-5px; position:relative;">
Text shifted 5px upper
How about
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
position: relative;
}
ul li span {
position: absolute;
top: (x)px;
left: (x)px;
}
I would like a navbar like WikiHow with a icon on top and text beneath. I have been taking a look at their code but it seems pretty messy and I think there is easier ways to do it.
CSS
nav ul li{
border-left: 1px solid red;
height: 80px;
position: relative;
display: inline-block;
width: 70px;
}
.nav_icon{
margin-top: 15px;
background: url('inc/icon.png');
}
HTML
<nav>
<ul>
<li><div class="nav_icon"></div>HOME</li>
<li>PICTURES</li>
<li>ABOUT</li>
</ul>
</nav>
Then I created a <div> that I inserted before "HOME" in the first <li> element. I put some padding-top: 15px; on the div to make it go down a bit, but affects the whole <li> elements. I just want the icon to get some margin from the top...
http://jsfiddle.net/JmZbG/1/
By default inline blocks will align based on their text baseline.
Just add vertical-align: top; to the CSS for nav ul li to have them align by their top edge instead.
Here's my version: http://jsfiddle.net/JmZbG/2/
And here's an explanation of the changes:
nav ul li {
border-left: 1px solid red;
height: 80px;
line-height: 80px; /* Center the labels vertically */
float: left; /* Another way of lining up the <li>s horizontally */
display: inline-block;
}
.nav_icon {
display: inline-block; /* Needs to be an inline-block to be inline with the text */
vertical-align: middle; /* This centers the image vertically in it's <li> */
width: 46px; /* Need to define a size for an empty <div>... */
height: 41px; /* ...in order to see the background image */
background-image: url("http://i.imgur.com/mDXvZOZ.jpg");
}
Trying to put menu text right in the middle. No luck so far, and people here proved to be very helpful. :) text align center usually helps with most of the questions that came up here. Didn't help me though. What am i doing wrong?
<header>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
</div>
</header>
#navmenu {
margin-left:auto;
margin-right:auto;
height:60px;
width:836px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline-block;
margin-left:1px;
background-color:#3D3D3D;
width:49%;
height:40px;
color:#FFF
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
If the text will always be on a single line, you can vertically align the text by making the line-height the same height as the container.
Add line-height: 40px to your li:
#navmenu li {
...
line-height: 40px;
}
Did you try by giving table-cell (instead of inline-block) for display property for #navmenu li ?
I believe that will work.
I quickly grabbed this snippet out of one of my css files.
This was used to create a top right corner nav bar.
ul {
position: absolute;
top: 20px;
right: 35px;
}
ul li {
display: inline;
text-transform: lowercase;
text-align: right;
padding-left: 10px;
}
Hope that helps
If you want to center the whole menu container, use position:relative, and than apply the margin:auto property. If you need to center the individual links, i hope giving width and text-align center will surely work, as it is a block. If not, you can always use padding-left and padding-right to achieve that. But the width of the menu items will be scaled according to it's content. One more thing, try giving pixels instead of percentage and check. Hope this helps you.
I have a list. Each item in the list contains an icon span and text span like so:
<ul id="features">
<li>
<span class="icon"></span>
<span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
</li>
</ul>
Using the following CSS
#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left; }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block; }
I believe this code should produce text which floats next to the icon, and automatically adjusts its width accordingly. However this isn't the case see jsfiddle.
Why isn't the text floating next to the icon?
width: auto will instruct the text span to assume as much width as it requires, based on its content. This is what causes the entire span to wrap when that space is not available.
Ah, trying to make fixed and fluid width live together in harmony... an old problem.
Here's an updated fiddle with the solution: http://jsfiddle.net/dwZaN/11/
#features { list-style-type: none; margin-top: 24px; margin-right: 24px; }
#features li { margin-bottom: 24px; overflow: auto; width: 100%; }
#features li span { }
#features .icon { background: #000; height: 55px; width: 55px; float: left; }
#features .text { padding-left: 75px; display: block; }
Basically...
Float your fixed-width icon
Don't float your fluid-width element, but give it padding-left with enough room to account for your icon and some buffer room (this automatically gives it 100% and subtracts whatever padding-left you specify)
Both elements should be block-level. You don't actually need to specify anything for the icon, but your text span needs to be display: block (or you can just switch to DIV's which are already block-level)
Also, since you specify a right margin in your parent UL, adding width: 100% makes it expand beyond the browser window and creates a horizontal scrollbar. Simply remove it.
You should be using a CSS background in the inner element and floating the LI. You do not need a separate element for the icon.
#features li { float left }
#features li span {
display:block;
background-image: url(...);
background-repeat:no-repeat;
height:25px;
padding-left:30px;
}
See my tutorial: I love lists.
If you want to use a font instead of an image, you can use position:relative, on your LI and add:
li:before {
content: "\25A0"; <--- this is a UTF-8 square
left: -1em;
position: absolute;
top: 0.1em;
}
(adjust your spacing values accordingly)
I don't use CSS that often so every time I use it I have to experiment again and figure things by trial and error.
What I'm trying to do is place icon_32 in the same line as: "I made this." The image is 32px high so I wanted to move it down a bit to center it with the line.
After experimenting a bit I found a solution that works on Safari and Chrome but doesn't work in Firefox.
Here's what I'm doing:
CSS
ul, li {
/* spacing */
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* list */
list-style: none;
}
#work_list li {
display: block;
/* spacing */
margin-bottom: 10px;
}
#work_list .icon_32 {
display: inline-block;
position: absolute; /* This doesn't work in Firefox. */
cursor: pointer;
/* spacing */
margin-top: -8px;
margin-left: 8px;
}
HTML
<ul id="work_list">
<li> I made this. <div class="icon_32"></div></li>
<li>I write, sometimes.</li>
</ul>
Because one can't add a padding-top to inline elements, I made the icon's position absolute. The problem with just having it absolute is that I have to manually set the margin-left because the icon doesn't move to the left automatically with the text. By setting display to block on the <li> and display to inline-block on the icon, what I was trying to achieve worked (although I don't fully understand why). This however, doesn't work in Firefox (and I haven't even tested in IE yet).
Is there a proper way to achieve what I'm truing to do that works correctly on all browsers?
Update: How I ended up solving this by using the suggestions from the answers. Thanks a lot for the help!
I didn't want to use line-height because I wanted to preserve the original height of the li. I just got rid of the unnecessary position: absolute and added vertical-align: middle. After doing so, the image was still affecting the height of the li, so I just added an id to the affected li and overwrote the margin-bottom so the sum of its height + bottom margin would equal the sum from the li without the 32px image.
This is how it ended up being:
CSS
ul, li {
/* spacing */
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* list */
list-style: none;
}
#work_list li {
display: block;
/* spacing */
margin-bottom: 10px;
}
#work_list #work_item_icon {
margin-bottom: 3px;
}
#work_list span.icon_32 {
display: inline-block;
cursor: pointer;
/* spacing */
vertical-align: middle;
margin-top: -8px;
margin-left: 8px;
}
HTML
<ul id="work_list">
<li id="work_item_icon">I made this. <span class="icon_32"></span></li>
<li id="work_item_writing">I write, sometimes.</li>
</ul>
There are many ways to do this:
You can use negative margins to even out the difference between the line height and image height. The height of one line of text appears to be 20px; so a margin-top: -6px and margin-bottom: -6px will make the 32px tall image act as if it were 20px:
#work_list img.icon_32
{
vertical-align: middle;
margin-top: -6px;
margin-bottom: -6px;
}
#work_list span.icon_32
{
/* //// SPAN AS IMAGE \\\\ */
display: inline-block;
width: 32px;
height: 32px;
background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
/* \\\\ SPAN AS IMAGE //// */
vertical-align: middle;
margin-top: -6px;
margin-bottom: -6px;
}
demo
Alternately, you can set a line height equal to the height of the image and set vertical-align: middle for the image. You can adjust a few pixels using a negative margin-top:
ul, li
{
line-height: 32px;
}
#work_list img.icon_32
{
vertical-align: middle;
margin-top: -4px;
}
#work_list span.icon_32
{
/* //// SPAN AS IMAGE \\\\ */
display: inline-block;
width: 32px;
height: 32px;
background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
/* \\\\ SPAN AS IMAGE //// */
vertical-align: middle;
margin-top: -4px;
}
demo
This also work in firefox also please give position:relative to your LI
or it's better to edit your HTML like this:
<ul id="work_list">
<li><span>I made this.<span> <div class="icon_32"></div></li>
<li>I write, sometimes.</li>
</ul>
CSS:
li span, icon_32{
display:inline-block;
}
Try adding this css rule to your li,
li {line-height: #px;}
play around with the line height to get what you want. Also if using line height affects the image add float: left; to it, or take it out of normal flow.
I think your solution will be line-height. You can set this on the li, and it will center the text vertically.
#work_list li {
line-height: 32px;
}
#work_list .icon_32 {
height: 32px;
width: 32px;
}
Give the element containing the icon div relative position and it will make the positioning of the icon relative to that container.
http://jsfiddle.net/9HeNy/
Make the icon_32 element position : relative and it's parent li element line-height : 32px. A demo is above.
Docs for line-height: https://developer.mozilla.org/en/CSS/line-height