Hard time with centering an inline-block

I looked up some of the questions on the forum but I didn’t get the full picture.

I am unsure of how to center an inline-block. I tried using margin: 0 auto but nothing happened. I also cannot add space between words, but I assume that that’s because I am working with a list (but I’m not sure if that’s true)

Hey @dinnosam,

I can’t be sure of what specifically you mean, but here are some ideas:

Note what happens in these examples:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link href="main.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<span class="test">
			Inline block
		</span>
	</body>
</html>
// css is the same for both
.test{
	display: inline;
	text-align: center;
	outline-color: blue;
}
.box{
	background-color: red;
}

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link href="main.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<span class="test">
			<div class="box">Inline block
			</div>
		</span>
	</body>
</html>

Hi, so I have a list and I’ve made it an inline-block so I can make a navigation bar. The list, however, is not in the centre.

This is an example from the Broadway example from the CSS lesson.

HTML:

<header>

        <nav>

          <ul>

            <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>

          </ul>

        </nav>

    </header>

CSS:

nav li {

  color: #fff;

  font-family: 'Raleway', sans-serif;

  font-weight: 600;

  font-size: 12px;

  display: inline-block;

}

Yea, I’ll try to give you more clues.

Try inspect element on the header and see if you notice anything funny. That’s the biggest clue.

@dinnosam I’ll leave what I think is the answer here, it might depend on the rest of your code though.

Answer

Change the width of header to be 100% and set its text-align to center.

So I noticed that the margin gives the individual list items space to be centered, but I can’t get it to center when I include display: inline-block;

Check the width of header. What is it showing up as?

Is that what you meant?

Yea, is that what you wanted?

yup, but I had to guess the padding to center it. Is there a way to do it without guessing?

text-align: center; (in the header css, which will affect the whole nav)

It didn’t work still. I’ll keep trying. Thank you!

Try outlining the border of nav, and of header with different colors. It’ll give you more clues as to how you can manipulate them

1 Like