Menu icon Foundation
How do align a list?

Hey,
i would like to align a list on my website (vertical middle). The list in the right corner: http://www.predatordesign.de/temp2/

I hope you can help me!

Greets,
Jonas

Bildschirmfoto 2014 08 08 um 08.32.10

alignlistmiddlecentervertical

Hey,
i would like to align a list on my website (vertical middle). The list in the right corner: http://www.predatordesign.de/temp2/

I hope you can help me!

Greets,
Jonas

Bildschirmfoto 2014 08 08 um 08.32.10
Jason Demitri almost 5 years ago

inline style. . either in the row, column or on the list itself

Couldn't See your link hope it helps

<ul class="no-bullet" style="text-align:center;">
  <li>Something</li>
  <li>Something Else</li>
</ul>

Nic Edwards almost 5 years ago

You should be able to accomplish this using our Utility align classes and Side Nav classes. I supplied the links below!

Utility align classes
http://foundation.zurb.com/docs/utility-classes.html

Side nav classes
http://foundation.zurb.com/docs/components/sidenav.html

Jonas Marlo Loerken almost 5 years ago

I think you guys misunderstood me. I would like do align my list vertical middle. Please have a look on my website http://www.predatordesign.de/temp2. In the top right corner you will see my list with no align.

Thank you for your help!

Rafi Benkual almost 5 years ago

I think Nic is trying to show an easy way to do a vertical list. Here is what he is describing http://codepen.io/rafibomb/pen/pvtbl

If that is not it, can you please share an image or example of what you want to make?

Jonas Marlo Loerken almost 5 years ago

I added an image :)

As you can see the list isn't so the same high as the text on the left. That's the Problem.

Rafi Benkual almost 5 years ago

Thanks for clearing that up. You can simply use some margin-top for this:

.social-icon a {
  display: block;
  width: 100%;
  height: 100%;
  margin-top: .7rem;
}