Within a Container, How to Center Blocks with Centered Text or an Image Inside

HTML & CSS
1

I’d like to make a container with horizontally centered things.

Inside the container, I’d like to put two centered blocks.

One block would have centered text.

The second block would have a centered image.

2

I think you mean vertically centered or “middled” as CSS describes it

Try this for starters.

This is a “working page” - starts with doctype, ends with close html. Copy it to a file and open it in your favorite browser to see how it works.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/within-a-container-how-to-center-blocks-with-centered-text-inside/198107
Within a Container, How to Center Blocks with Centered Text Inside 
daveg7
-->
    <style>
html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
.outerbox {
    display:table;
    border-spacing:0 0;
    border:5px solid #743;
}
.innerbox {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    padding:1em;
}
.innerbox:first-child {
    background-color:#fed;
}
img {
    display:block;
    margin:0 auto;
}

    </style>
</head>
<body>

<div class="outerbox">
    <div class="innerbox">
        <img src="http://placehold.it/300x200" alt="" width="300" height="200">
    </div>
    <div class="innerbox">
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>I can be as many paragraphs as you wish.</p>
    </div>
</div>

</body>
</html>
3

I mean horizontally centered (between the left and right margins), and I hope to see a revision of your code.

Please give me only HTML and CSS, and many thanks.

4

You will have to explain what you mean since the only thing in my code is HTML and CSS

5

Try This:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>horizontally centered</title>
<!--
http://www.sitepoint.com/community/t/within-a-container-how-to-center-blocks-with-centered-text-inside/198107
Within a Container, How to Center Blocks with Centered Text Inside 
daveg7
-->
    <style>
html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
.outerbox {
    display:table;
    border:5px solid #743;
    margin:0 auto;
}
.innerbox {
    text-align:center;
    padding:1em;
}
img {
    display:block;
    margin:0 auto;
}

    </style>
</head>
<body>

<div class="outerbox">
    <div class="innerbox">
        <img src="http://placehold.it/300x200">
    </div>
    <div class="innerbox">
        <p>I can be as many paragraphs as you wish.</p>
        <p>Long or short.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>Long or short.</p>
        <p>I can be as many paragraphs as you wish.</p>
        <p>Long or short.</p>
    </div>
</div>

</body>
</html>
6

I guess the following confused me, because it looked like something else to me:

 html {
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
 }

Also, could you please explain the following:

 *,*:before,*:after {
     box-sizing:inherit;
 }

Thanks!

7

box-sizing is a CSS property that includes the width of a border or padding in the width of a box. It mimics the much-maligned but now appreciated Microsoft box model. It is optional in my code. You can delete it if you prefer to account for the widths separately.

A good article about {box-sizing:border-box} can be found here:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.