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 trialDaniel Stockham
10,277 PointsCentering elements
I'm running into this issue where I want the "About Us" element to center all children while changing the size of the paragraph tag to a smaller box.
The problem is that when re-sizing the width, the paragraph isn't center anymore. How can I go about fixing that?
<html>
<head>
<meta charset="utf-8">
<title>Trekking</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="normalize.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
</head>
<body>
<header>
<div class="thumb"><img src="" href="#" alt="symbol of a hiking boot" /></div>
<nav>
<ul>
<li>home</li>
<li>products</li>
<li><img class="thumb" src="" href="#" alt="image of a shopping cart" /></li>
</ul>
</nav>
<div class="heading" ><h1>Our Clothing, Your Comfort</h1>
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</h3>
</div>
</header>
<div class="search">
<div class="categories">
<input type="checkbox" name="men">Men</input>
<input type="checkbox" name="women">Women</input>
<input type="checkbox" name="children">Children</input>
<div class="extender">
<h4>see all products</h4>
</div>
</div>
</div>
<div id="product_list">
<div class="product_section">
<p>men</p>
<hr />
<div class="page_shifter" class="shifter"><p>1 / 5 <br>< >
</p>
</div>
<div class="item_list">
<ul>
<li><img src="" alt="product image with options goes here" /></li>
<li><img src="" alt="product image with options goes here" /></li>
<li><img src="" alt="product image with options goes here" /></li>
</ul>
</div>
</div>
<div class="product_section">
<p>women</p>
<hr />
<div class="page_shifter" class="shifter"><p> 1 / 5 <br /> < ></p>
<div class="item_list">
<ul>
<li><img src="" alt="product image with options goes here" /></li>
<li><img src="" alt="product image with options goes here" /></li>
<li><img src="" alt="product image with options goes here" /></li>
</ul>
</div>
</div>
</div>
</div>
<div class="about_us">
<h3>about us</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="social_media">
<img src="" alt="generic social media icon" />
</div>
<footer>
<div class="company_summary">
<h3>Trekking</h3>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>
<div class="site_map">
<ul>
<li>credits</li>
<li>privacy</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
</footer>
</body>
</html>
And here is the CSS:
/* {
border: 1px dashed blue;
}*/
html {
font-family: 'Montserrat', sans-serif;
font-size: 1.0rem;
text-transform: uppercase;
display:
}
body {
margin: 0%;
}
/**************************************
Header/Main Nav
**************************************/
header {
background: url(heroImage.jpg) no-repeat center;
background-size:cover;
/*background-clip: content-box;*/
height: 800px;
padding-top: 20px;
text-align: center;
color: #FFF;
}
.thumb {
float:left;
}
.heading {
position: absolute;
bottom: 30%;
}
.heading h1 {
font-size: 3em;
}
.heading h3 {
font-size: 1em;
padding: 0% 20%;
}
header nav {
float: right;
list-style: none;
display: inline;
margin-top: -10px;
}
header nav ul {
list-style: none;
}
header nav ul li {
display: inline;
}
/**********************
Search Area
**********************/
.search {
color: rgb(72, 72, 72);
text-transform: uppercase;
display: inline;
}
.categories {
background: rgb(245,246,248);
padding: 4% 4%;
}
.categories input {
}
.extender {
float: right;
margin-top: -1.5%;
color:rgb(255,255,255);
font-weight: 100;
background:rgb(170,156,117);
padding: 5px 3%;
border-radius: 5%;
}
/*************************
Product Section
*************************/
.product_list {
height: 200%;
padding: 0 6%;
}
.product_section {
/*margin-top: 1em;*/
}
.product_section ul li {
display: inline;
}
.product_section h3 {
margin-left: .8em;
}
.product_section hr {
width: 75%;
display: inline-block;
}
shifter {
float:right;
margin-right: 7%;
}
.item_list {
}
/***********************************************************
About Us
***********************************************************/
.about_us {
background: rgb(170,156,117);
padding: 6%;
margin: 38px 0;
text-align: center;
}
.about_us h3 {
color:rgb(150,135,100);
}
.about_us p {
border: solid 1px rgb(150,135,100);
/*width: 40%;*/
color:rgb(70,69,67);
text-transform: none;
padding: 9%;
line-height: 1.8em;
}
2 Answers
Brandon Mowat
8,186 PointsIf you want to center the p tags, be sure to give them a width that is smaller then their container and "margin: 0 auto". Like so...
.about_us {
width: 100%;
}
.about_us p {
width: 40%;
margin: 0 auto;
}
This should center them.
Robert Richey
Courses Plus Student 16,352 PointsHi Daniel,
Although Brandon has already provided an excellent answer, I'll show another way to accomplish the same thing using CSS Flexible Boxes.
<div class="about_us">
<h3>about us</h3>
<div class="flex-container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
/***********************************************************
About Us
***********************************************************/
.about_us {
background: rgb(170,156,117);
padding: 6%;
margin: 38px 0;
text-align: center;
}
.about_us h3 {
color:rgb(150,135,100);
}
.about_us p {
border: solid 1px rgb(150,135,100);
width: 40%;
color:rgb(70,69,67);
text-transform: none;
padding: 9%;
line-height: 1.8em;
}
.flex-container {
display: flex;
justify-content: center;
}
Cheers
Daniel Stockham
10,277 PointsDaniel Stockham
10,277 PointsThanks Brandon, that helped a lot.