CODEWITHSUNDEEP
htmlcsscss-selectorshtml-lists
irosenb
irosenb

Reputation: 868

centering li:before content with text

So I have a <ul> that I need to style. I'm using +'s to style it. It looks like this: 

+ abc
+ 123
+ hello

The problem I'm having is that I'm not able to center the +'s with the actual li's. As in, So the pluses are ever so slightly off, when I need them to vertically align with the li text. Anyone know what I'm doing wrong?

Here's a link to the fiddle.

CSS

ul {
    list-style: none;
    display: table-cell;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 1em;
    text-indent: -1em;
}

li:before {
    content: "+";
    padding-right: 5px;
    vertical-align: middle;
    display: inline;
    padding-top: 0;
    margin-bottom: .5em;

}

Edit

Okay, I didn't mean align the #content with the other ul. I meant vertically center the + with the abc.

Upvotes: 4

Views: 3636

Answers (5)

Joel Balmer
Joel Balmer

Reputation: 1479

Might not work for everyone but for my situation I adjust accordingly by adding lineheight to the li (text) and the li:before (font awesome icon):

li {
  /* li css */
  line-height: 16px;

li:before {
  /* li before css */
  line-height: 12px;
}

Hope that helps someone else too!

Upvotes: 0

ericjbasti
ericjbasti

Reputation: 2075

This method gives you a bit more fine tuning.

http://jsfiddle.net/2FZx6/9/

li:before { // add these bits
    position: relative;
    top: -.2em ; // fine tune this however you want
}

Upvotes: 1

Zeta
Zeta

Reputation: 105905

vertical-align: text-bottom;

http://jsfiddle.net/2FZx6/4/

You don't want to have the + in the middle of your li, but on the same height as a lower-case letter. That's why you have to use text-bottom instead of middle. If you were to use letters with descenders (such as g or y) you would notice that the actual dots also aren't in the middle of the element/text, but on text-bottom or baseline.

(Actually, the default value baseline works pretty well.)

Resources

Upvotes: 6

Craig Ralston
Craig Ralston

Reputation: 194

You may have better luck just using a background image on your li instead of using the "+" - This way you can position the "+" (as a background image) however you'd like.

http://css.maxdesign.com.au/listutorial/master.htm

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

Without using a reset stylesheet such as Eric Meyers or Normalize.css your browser automatically adds default styles. In my case, chrome added 40px to your ULs.

I explicitly set the padding to 20px and it looks good, but I'd implement a reset stylesheet if you can to save headaches down the road.

JsFiddle

ul {
    padding-left:20px;
    margin:0;
}

Upvotes: 1

Related Questions