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
Donald Richmond
13,807 PointsHow does one center an element (such as a button) on vertically on a webpage using CSS? I know about text-align.
How does one center an element (such as a button) on vertically on a webpage using CSS? I know about text-align. for centering text. I need to know how one does it for a button, list, or an image.
6 Answers
Anthony Lucio
20,431 Points.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ }
Here's a link to some examples:
Jonathan Etienne
24,572 PointsHi,
You might want to look into CSS3's Flexbox Properties (justify-content is what you will need):
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
All the best,
Jonathan Etienne
Donald Richmond
13,807 Pointsh2 {
justify-content: center;
}
I tried the following on my CSS page. It did not work. Any tips???
Jonathan Etienne
24,572 PointsHi Donald,
You're not using flexbox properly. As the guide mentions:
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
1) To use flexbox layout just set the display property on the parent HTML element:
display: -webkit-flex; /* Safari */
display: flex;
2) You apply the properties to center horizontally
-webkit-justify-content: center; /* Safari */
justify-content: center;
3) You apply the property to center vertically
-webkit-align-items: center; /* Safari */
align-items: center;
Hence,
h2{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: center; /* Safari */
justify-content: center;
-webkit-align-items: center; /* Safari */
align-items: center;
}
Step 1 is absolute necessity as it defines the parent, and makes properties applicable.
Donald Richmond
13,807 PointsStill no resolution trying justify_content:
Jonathan Etienne
24,572 Pointstry
h2{
display: -webkit-flex; /* Safari */
display: flex; -webkit-justify-content: center; /* Safari */
justify-content: center;
-webkit-align-items: center; /* Safari */
align-items: center;
}
Donald Richmond
13,807 Pointstable {
display: -webkit-flex; /* Safari /
display: flex; -webkit-justify-content: center; / Safari /
justify-content: center;
-webkit-align-items: center; / Safari */
align-items: center;
}
This code worked for h2 and worked for a table. It would NOT work when an id was used as the selector.
Any id what might be wrong???/
Jaime Williams
8,926 PointsSpecificity, id's are at the top of the ladder (well after inline). Most likely that id has been called before and it is my understanding you can only use an id reference once in a page.
Okay, the last reference you have to take into account the domain name but the writer does correctly attribute the id singleton issue and the statement about reusability.
Jonathan Etienne
24,572 PointsID can only be reference once. If you want to reference multiple-times, use classes
Travis Mathews
12,406 PointsFor most things, I usually use this method from the css tricks guide:
<blockquote> If padding isn't an option for some reason, and you're trying to center some text that you know will not wrap, there is a trick were making the line-height equal to the height will center the text.
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
</blockquote>
Travis Mathews
12,406 PointsSorry still working on this markup thing.