0

CodePen: http://codepen.io/hgducharme/pen/juiEo

My links on the right side are not in the middle of the ul box. The avatar on the far right is positioned at the very top, and if I want to change the margin-top of my li elements, then it basis it off of the top of my avatar. I have margin-top: 0px;, which moves all my li elements to the top, but my avatar is staggered. I want to be able to get them all in a straight even line.

I'm currently trying to rebuild google's homepage.

Edit: Browser is Chrome

Hunter
  • 646
  • 1
  • 6
  • 23
  • What @Jean-FrançoisSavard said, also consider removing the default `padding` which is applied by UAs to list elements such as `
      ` by `padding: 0;`
     – Hashem Qolami Sep 05 '14 at 21:22
  • @Hunter, When asking questions about web design, please specify your browser as it may differ a lot between IE9 and Chrome for example. If you do so, it will be easier for me to explain the reason of this behavior instead of simply throwing a solution as Hashem commented on my answer. – Jean-François Savard Sep 05 '14 at 21:26

1 Answers1

3

You need to specify the vertical align :

li {
     vertical-align:middle;
     display: inline-block;
     list-style: none;
     padding: 5px;
     border: 1px solid blue;
}
Jean-François Savard
  • 20,626
  • 7
  • 49
  • 76
  • While true, it doesn't explain the reason of this behavior. – Hashem Qolami Sep 05 '14 at 21:19
  • Awesome, thank you. One more question: On the '
    • – Hunter Sep 05 '14 at 21:29
  • Because inline and inline block with a known height, in this case 60px needs the vertical-alignment. Common CSS knowledge. Knowing what is inline, what is block, what is inline-block and how floats work is base knowledge. – Christina Sep 05 '14 at 21:30
  • Christina is right, except that the height in that case is 30px, 60 is the width ;) – Jean-François Savard Sep 05 '14 at 21:32
  • On the #share use line-height equal to the height of the container. line-height:30px; – Christina Sep 05 '14 at 21:32
  • Parent of the li is 60px (#nav), the li itself is not set, the padding, text, line-height makes the height. – Christina Sep 05 '14 at 21:33
  • @Christina So inline & inline-block just knew that it needed to be placed horizontally in the ul container (or the nav container)? But it didn't know what height to put it at, so the height must be specified (as middle, in this case) to position them accordingly? – Hunter Sep 05 '14 at 21:33
  • inline-block elements and inline when the height of the parent is set and you put a vertical-align:middle css works this way. – Christina Sep 05 '14 at 21:34
  • Horizontal alignment is different. Inline is just all inline. Spans are inline, em, and so forth. You can also change a block to inline. – Christina Sep 05 '14 at 21:35
  • Actually, they're not lined up because as inline level elements they are sitting in their baseline. The baseline of inline-block elements is defined in the spec. By using `vertical-align` property, you'll alter their position. – Hashem Qolami Sep 05 '14 at 21:38
  • Yes, this is basic knowledge. This stuff should be known before SO – Christina Sep 05 '14 at 21:39