Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Gemz Nunn
Gemz Nunn
16,296 Points

Center <ul> in <section>

I'm trying to get an <ul> of images to center in a <section>. If I understand it correctly, <ul> and <section> are both block elements, so if I want to center the <ul> I need to display: inline or display: inline-block. I've tried this and added text-align- center. It doesn't work.

Can anyone help? The problem code is at the bottom under the heading /* WHAT I DO */

body {
  background: #fdeddc;
  font-family: 'Alegreya Sans Light', sans-serif;
  font-size: 1em;
  color: #666;
  line-height: 1.4375em;
  /* 23px / 16px */
}

#wrapper {
  max-width: 120em;
  /* 1920px / 16px */
}

a {
  text-decoration: none;
}

a:link {
  color: #B16063;
}

a:visited {
  color: #936B69;
}

a:hover {
  color: #DB9F90;
}

section {
  margin: 0 3.125em 3.125em 3.125em;
  padding-top: 3.125em;
  text-align: center;
}

section h1 {
  font-family: 'Forum Regular', serif;
  font-size: 1.875em;
  /* 30px / 16px */
  color: #B16063;
  border-bottom: 3px #B16063 solid;
  padding-bottom: 0.625em;
  margin-bottom: 1.25em;
}

p {
  margin-bottom: 20px;
}

img {
  max-width: 100%;
}

/* HEADER */
header {
  background: url(../imgs/blur.png) no-repeat;
  background-size: cover;
  height: 15.625em;
  /* 250px / 16px */
}

.logo {
  color: white;
  border: 1px solid white;
  display: inline-block;
  margin: 1.25em;
  /* 20px / 16px */
  padding: 1.1875em;
  /*19px / 16px */
  text-align: center;
  float: left;
}

.logo h1 {
  font-size: 3em;
  /* 48px / 16px */
}

.logo h2 {
  font-size: 1.5em;
  /* 48px / 16px */
}

nav {
  float: right;
  margin: 1.25em;
  font-size: 1.25em;
  display: inline-block;
}

nav ul, nav li {
  display: inline-block;
}

nav li {
  padding: 0.1875em;
  /* 3px /16px */
  margin-left: 0.125em;
  /* 2px / 16px */
  margin-right: 0.125em;
  /* 2px / 16px */
}

nav li a:link, nav li a:visited {
  color: white;
}

nav li a:hover {
  color: white;
  border: 1px solid white;
  display: inline-block;
}

/* WHAT I DO */
#what-i-do ul {
  display: inline;
  text-align: center;
}

#what-i-do li {
  padding: 0.1875em;
  /* 3px /16px */
  float: left;
  width: 25%;
}

1 Answer

Jason Narciso
Jason Narciso
4,763 Points

Hi Gemz.

I believe you just have to define your ul & li to be display: inline-block.

Check this out, maybe it will help? http://codepen.io/jasonnarciso/pen/BNEwvM

Gemz Nunn
Gemz Nunn
16,296 Points

Thanks Jason! Think I've got it working now. :)