Why isn't this element centering?

Question

I'm asking this for a class assignment I'm working on, and somehow I've broken CSS so bad that even my teacher is stumped.

body {
  font-family: Georgia, serif;
  background: url("graphics/Background.png");
  margin: 5%;
}

h1 {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

.panel {
  border: 3px solid black;
  width: 500px;
  height: 500px;
  margin: 20px;
}

#container {
  display: flex;
  align-content: space-between;
  justify-content: center;
  background-color: red;
  flex-direction: column;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="Graphics/placeholder.png">
  <img class="panel" src="Graphics/placeholder.png">
</div>
</div>

```

This is what I have after my professor did some tinkering to try and figure out what was going on.

Michael Benjamin · Answer 1 · 2019-11-20T22:14:33.713

align-content targets flex lines, not flex items.

You need to use align-items.

Plus, align-content has no effect in a single-line flex container (i.e., flex-wrap: nowrap).

h1 {
  text-align: center;
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.panel {
  border: 3px solid black;
  width: 100px;
  height: 100px;
  margin: 20px;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="http://i.imgur.com/60PVLis.png">
  <img class="panel" src="http://i.imgur.com/60PVLis.png">
</div>

Here's a detailed explanation of cross-axis alignment:

How does flex-wrap work with align-self, align-items and align-content?

From the flexbox spec:

§ 8.4. Packing Flex Lines: the align-content property

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

^{(emphasis mine)}

score 0 · Answer 2 · answered Nov 20 '19 at 22:06

You want align-items, not align-content
justify-content refers to the main axis, whereas align-items refers to the cross-axis. This means that you likely want align-items: center if your intention is to center the items horizontally.

body {
  font-family: Georgia, serif;
  background: url("graphics/Background.png");
  margin: 5%;
}

h1 {
  text-align: center;
  padding: 0px 0px 20px 0px;
}

.panel {
  border: 3px solid black;
  width: 500px;
  height: 500px;
  margin: 20px;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  flex-direction: column;
}

<h1>Sunday Funnies</h1>
<div id="container">
  <img class="panel" src="Graphics/placeholder.png">
  <img class="panel" src="Graphics/placeholder.png">
</div>

Why isn't this element centering?

2 Answers2