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;
}
Related
I did take a look at loot of similar questions here, but no one helped me solve my problem. I have a problem with vertically align the img on the left side in the li cell (this is working), but i can't align the text next to img. The line-height from ul li div is messing my things.
Here is a Jsfiddle.
What i wan't to achive is this:
Vertically and horizontally align img in 1/3 of the li cell on the left side.
Vertically and horizontally align text in 2/3 of the li cell, text align should be left. Text can be multiline and with bolded heading in first line.
You can also edit html code, if it is necessary.
HTML
<div class="product_banner_right">
<div class="product_banner_right title">
<h3>LOOK DOWN</h3>
</div>
<ul>
<li>
<img src="http://dummyimage.com/26x23/000/fff.png" alt="" />
<p><span>HEADING1</span>first line text
<br>second line text</p>
</li>
<li>
<img src="http://dummyimage.com/48x9/000/fff.png" alt="" />
<p><span>HEADING2</span>first line text</p>
</li>
<li>
<img src="http://dummyimage.com/40x24/000/fff.png" alt="" />
<p><span>HEADING3</span>first line</p>
</li>
<li>
<img src="http://dummyimage.com/46x17/000/fff.png" alt="" />
<p><span>HEADING4</span>first line text
<br>second line text
<br>third line text</p>
</li>
</ul>
</div>
CSS
.product_banner_right {
font-size: 1.2em;
position: relative;
width: 250px;
}
.product_banner_right .title {
height: 40px;
background: #1b3a6f;
}
.product_banner_right .title h3 {
text-align: center;
line-height: 40px;
}
.product_banner_right ul {
margin: 0;
padding: 0;
}
.product_banner_right ul li {
display: block;
height: 70px;
border: 1px solid black;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
}
.product_banner_right ul li p span {
font-weight: bold;
}
change the following styles to :
.product_banner_right {
font-size: 100%;
position: relative;
width: 250px;
}
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 4%;
width: 11%;
max-width: 50px;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
width: 80%;
}
the result:
I have rewrote your html to accomodate the changes.
I have applied two options:
variable height list items.
fixed height list items with overflow.
Fixed height list items
CLICK FOR DEMO
This option is fully browser compatible but would require manually adjustment of the top margin for each list item.
Alternatively this option could still be used with the box flex model described below.
Fix height of list item and add scroll on overflow:
height:70px;
overflow:auto;
Variable height list items
CLICK FOR DEMO
This option relies on css3 flex box model:
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
-webkit-justify-content:center;
Please note flex box requires browser support. It is now highly compatible with modern browsers however old versions of the useless outdated browser ie will not support it.
Users of these browsers will still have a nice viewing experience however the images will be aligned at the top of each list box and not the center.
i don't know if this is the best approach but it looks allready a bit better than yours.
i just changed the following:
.product_banner_right ul li img {
vertical-align: middle;
padding: 0 10px;
/* CHANGED*/
width: 33%;
}
.product_banner_right ul li p {
vertical-align: middle;
display: inline-block;
/* CHANGED*/
width: 66%;
position:absolute;
}
but you still have to get the text to fit into the table.
hope it helped, cheers!
You can make the texts in separate classes and then arrange the as you wish using margin
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)
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.
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