Sat, 2017-08-12 01:14
https://codepen.io/bryant-designs/pen/VWOZKZ
So I am trying to center the <li> elements within the <ul> element both vertically and horizontally without a lot of code bloat. Please take a look at my codepen to see the HTML/CSS
//mod edit: opening element angle brackets escaped. ~gt
Sat, 2017-08-12 18:46
#1
This?
Try this approach;
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #wrapper { border: 1px solid black; margin: 0 auto; width: 90%; } #banner { margin: 1.5em 1em; overflow: auto; } #logo { float: left; } #banner ul { border: 1px solid red; display: table; float: right; padding: 0; } #banner li { border: 1px solid blue; display: table-cell; padding: 0 1em; text-align: center; vertical-align: middle; width: 50%; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="banner"> <p id="logo"> <a href="#"> <img src="http://svgshare.com/i/2ZX.svg" alt="Bryant Designs" width="180"></a> </p> <ul> <li>About</li> <li>Contact<br>me</li> </ul> </div> <!-- end banner --> </div> <!-- end wrapper --> </body> </html>
cheers,
gary