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 CSS Flexbox Layout Flexbox Properties Vertical and Horizontal Centering

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

How to center JUST the content and stretch the blue background?

Hi there,

Guil uses 3 approaches to centering the content in the container. However, say I wanted to stretch that blue background but keep the content in the middle, how would this be achieved? Through Flexbox or standard CSS properties?

Thanks, James.

4 Answers

Laman Mahammadli
Laman Mahammadli
2,528 Points
Laman Mahammadli
Laman Mahammadli
2,528 Points

A very late answer but.. The Flex Item can also be a Flex Container. So, if you give the item {flex:display} and then the p {margin:auto}, it'll work.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You could use other CSS properties.

html

<body id="wrapper"
<div><h1>Title</h1><p>stuff here</p></div>
</body>

css

#wrapper {
      width: 940px;
}

h1, p {
   text-align: center;
}

div {
   width: 100%;
}

With the above example, there is a wrapper that would contain the materials. It is set to 940px so nothing in the body will ever be bigger than that. h1 and p are both centered text in the middle of the div and the div is set to 100% which would at most ever be 940px. You could make the div a specific width and height like 400px; but the h1 and p would still be text aligned to center. That and at this very minimal code the h1 and p are block elements so would stack on top of each other.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Here's a great page discussing flexbox as well. It explains everything you would need to know very nicely.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You can't as easily achieve this with flex box but it is possible. I edited the code used in the video. It uses the same idea as above. I created a fixed width/height container, then a fixed width item, the blue box in the middle. This created a large blue rectangle inside the white hued container. I then did a text align center and finally added margin top to the tags containing text to move it downward.

html

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
    <div class="container">
        <div class="item-4 item">
            <h1>Flex Item</h1>
            <p>Vertical and Horizontal centering made easy!</p>
        </div>
    </div>
</body>
</html>

css

* {
    box-sizing: border-box;
}
body {
    font-size: 1.35em;
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    background: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}
h1 {
  margin-top: 200px;
}

p {
    font-size: 15px;
    line-height: 1.5;
}
.container {
    margin: 45px auto;
    padding: 10px;
    background: #fff;
  border-radius: 5px;
  box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}
.item {
    padding: 15px;
    color: #fff;
    border-radius: 3px;
    background: #3db5da;
  width: 100%;

}


.container {
    display: flex;
  width: 1500px;
  height: 500px;
  text-align: center;
}