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!

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

Centering div content

I have 2 classes blocks (.block2 and .block1). I am trying to get the content of .block1 to center.

.block2 I can center with text-align but .block1 has a field and text.... Tried a lot of things and cant get it. Even margin: 0 auto doesnt do it...

.wrapper {
    max-width: 970px;
    margin: 0 auto;
}

.fields {
    background: #F7F7F7;
    overflow: hidden;
    padding: 15px 20px 40px 20px;
}

.block2 {
    font-family: 'Open Sans', sans-serif;
    max-width: 465px;
    font-weight: 700;
    float: left;

}

.block1 {
    font-family: 'Open Sans', sans-serif;
    margin: 0 auto; /* doesn't  do anything =( */
    width: 465px;
    height: 100%;
    float:right;

}

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8">
    <title>site</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style2.css">
</head>

<body>
<div class="wrapper">
<div class="fields">
    <div class="block2">
        <h1>
            Save 50%!
        </h1>
        Just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just text just
        </div>
    <div class="block1">
        <h2>14 free days!</h2>
        <input type="text" value="name">
        </div>

</div>
</div>
</body>
</html>

3 Answers

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

If you still want to use the margin you'll have to create a div inside block1 and give it the margin, like that:

<div class="block1">
    <div class="center">
        <h2>14 free days!</h2>
        <input type="text" value="name">
    </div>
</div>

and the CSS should be like that:

.center { margin:0 auto; width:400px;}

change the width as you want

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

thanx a lot)

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

But the text-align works perfect also for the input field

.block1 {
    font-family: 'Open Sans', sans-serif;   
    width: 465px;
    height: 100%;
    float:right;
    text-align:center;

}
Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Works)))))))))

Zoltan-Lorand Szogyenyi
Zoltan-Lorand Szogyenyi
736 Points
Zoltan-Lorand Szogyenyi
Zoltan-Lorand Szogyenyi
736 Points

Hello. The reason why your box1 is not being centered, even if you've used the margin: 0 auto; is because you are floating the element. What the browser does is initially center the element, but then it floats it to the right.

Solution: delete the floating code if you want to center the element.

.block1 {
    font-family: 'Open Sans', sans-serif;
    margin: 0 auto;
    width: 465px;
    height: 100%;
    float:right; /* line of code that doesn't let you center the element */

}
Alexey Tseitlin
Alexey Tseitlin
5,866 Points

It doesn't center with margin: 0 auto;

.block is an inner div and margin: 0 auto; centers it with the parent div... Is there a way you use margin of the inner?