1 reply [Last post]
Sat, 2017-08-12 01:14
bryantdesigns
bryantdesigns's picture
Offline
newbie
Last seen: 1 week 2 days ago
Timezone: GMT-6
Joined: 2017-08-12
Posts: 1
Points: 2

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

Top
  • Login or register to post comments
Tags:
Sat, 2017-08-12 18:46
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9639
Points: 3707

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top