css - verticaly align horizontal li

Question

I'm trying to vertically centralize an a: element within an li in a wordpress navigational menu, however I wasn't successful in achieving this.

The code I'm using is: CSS

.site-menu ul:before, .site-menu ul:after { content: ""; display: table; } .site-menu ul:after { clear: both; } .site-menu ul { *zoom: 1; } .site-menu .menu ul li{ list-style: none; float:left; border-right: 1px solid #7B7B7B; height:100%; } .site-menu ul{ height:10%; border: 1px solid #000; } .site-menu .menu ul li a{ margin-right:5px; margin-left:5px; } .site-menu .menu ul li:last-of-type{ border-right:none; } .site-menu a:link, .site-menu a:visited{ text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-size: 110%; color: #C5C5C5; vertical-align: bottom; } .site-menu li:hover{ color: #00FF99; background: #5A5A5A; }

HTML

<nav class="site-menu"> <?php wp_nav_menu('title_li=');?> </nav>

Might be something really simple however i'm unable to get to the bottom of if.

Thanks in advance, J

PHP is of no value to us...the actual output HTML is required. — Paulie_D
– Paulie_D, Commented Aug 21, 2015 at 15:34
@Paulie_D I just pasted the "HTML" code so one could confirm the class selector name — joebegborg07
– joebegborg07, Commented Aug 21, 2015 at 15:35
How can we check the alignment without seeing the output of the actual HTML & CSS? — Paulie_D
– Paulie_D, Commented Aug 21, 2015 at 15:38

coderrick · Accepted Answer · 2015-08-21 15:41:28Z

2

So going by your CSS I'm guessing that .site-menu .menu ul li a is the element that you wish to center? Anyway, in general you can center the children of any element this way:

display: flex; align-items: center; /* To center vertically */

More information can be found here.

answered Aug 21, 2015 at 15:41

coderrick

1,0112 gold badges8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joebegborg07 Over a year ago

Thanks for your reply. I was not aware of the display: flex syntax. Issue sorted. Thanks

hungerstar Over a year ago

@joebegborg07 depending on the browser support you are providing this may not be a viable solution, see here.

Collectives™ on Stack Overflow

css - verticaly align horizontal li

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related