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

Posted by Alexey Tseitlin
Alexey Tseitlin
5,866 Points

How to center text

I want that the text to be in the center of the height of the box.... How can I do that?

.box {
    width: 960px;
    margin: 0 auto;
    margin-top: 10px;
    height: 60px;
    border: 1px solid gray;
    text-align: center;
}

.box01 {
    float: left;
    margin: 0 0 0 20px;
}

.box02 {
    float: right;
    margin: 0 20px 0 0;
}

<div class="box">
        <div class="box01">The text-decoration CSS property is used to set the text.</div>
        <div class="box02">Formatting to underline, overline, line-through or blink. </div>
    </div>

3 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Try using line-height and set it equal to the height of the div. in this case, 60px. 

.box01,
.box02 {
line-height: 60px;
}
edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Alexey,

If you know that your text will only be one line (for example, on buttons) you can use line-height to the value of the div it's inside. Like so -

line-height: 60px

Or if it will be multiple lines, something like this will work. You'll have to enclose the text in tags -

<div class="box">
     <p>Some text</p>
</div>

.box {
    width: 960px;
    margin: 0 auto;
    margin-top: 10px;
    height: 60px;
    border: 1px solid gray;
    text-align: center;
}

.box p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
}
Jonas Östlund
Jonas Östlund
3,012 Points
Jonas Östlund
Jonas Östlund
3,012 Points

One way to do this is to use margins to push the content to a middle position:

.box {
    display: table;
    width: 960px;
    margin: 0 auto;
    margin-top: 10px;
    height: 60px;
    border: 1px solid gray;
    text-align: center;
}

.box01 {
    float: left;
    margin: 20px 0 0 20px;
}

.box02 {
    float: right;
    margin: 20px 20px 0 0;
}

Just push the top margins of the two boxes until you're satisfied. Another way to do this, if the parent has an dynamic height, is to use "table-cells". By adding a "div" between the parent, "box", and the child boxes you can control the spaces to all underlying childrens:

<div class="box">
    <div class="middle">
        <div class="box01">The text-decoration CSS property is used to set the text.</div>
        <div class="box02">Formatting to underline, overline, line-through or blink. </div>
    </div>
</div>

Now by adding a "table" to the parent and "table-cell" to "middle" you can now use the "vertical-align" propery:

.box {
    display: table;
    width: 960px;
    margin: 0 auto;
    margin-top: 10px;
    height: 60px;
    border: 1px solid gray;
    text-align: center;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.box01 {
    float: left;
    margin: 0 0 0 20px;
}

.box02 {
    float: right;
    margin: 0 20px 0 0;
}

Hope this clarifies vertical alignment a little...