Centering a heading inside a div

Question

I need to center a heading h1 inside of a div with .box class when the browser window width is less than 768 px.

.box {
  float: left;
  margin: 250px 0 0 0;
  height: 35%;
  width: 50%;
  background-image: url('img/header-bcg.png');
}
.box h1 {
  font-size: 40px;
  font-family: Bree serif;
  color: 33adae;
  margin-top: 30px;
  margin-right: 15px;
  line-height: 10px;
  float: right;
}
@media screen and (max-width: 768px) {
  .section1 {
    width: 100%;
  }
  .box {
    width: 100%;
  }
  .box h1 {
    text-align: center;
    margin: 0 auto;
  }
  footer,
  nav {
    width: 100%;
  }
}

<div class="box">
  <h1><p>Moderní webdesign</p> za nejnižší ceny!</h1>
</div>

Working perfectly, feel free to make an answer. @GermanoPlebani — nous3k, Nov 23 '15 at 15:13
Use `span` instead of `p` inside `h1`, http://stackoverflow.com/questions/19779519/is-it-valid-to-have-paragraph-elements-inside-of-a-heading-tag-in-html5-p-insid — Nenad Vracar, Nov 23 '15 at 15:21

score 1 · Answer 1 · answered Nov 23 '15 at 15:25

Amongs other solutions, you can make your div to be rendered as a Table, and the h1 as a table-cell.

You also need to the body of the documento to be 100% of the window height, if you dont, it'll be the height of its content.

So, for the solution, it would be something like:

body,html{
    height:100%;
}
  .box {
    display:table;
        width:100%;
        height:100%;
        text-align: center;
  }
    .box h1 {
        display:table-cell;
        vertical-align: middle;
    }

Pen

Links

This answer provides useful links – atfornes Sep 29 '16 at 14:51 — atfornes, Sep 29 '16 at 14:51

score 0 · Answer 2 · answered Nov 23 '15 at 15:15

You can use display:table-cell; for centering h1 vertically and horizontally.

Jsfiddle

html,
body {
  height: 100%;
}
.box {
  float: left;
  margin: 250px 0 0 0;
  height: 35%;
  width: 50%;
  background-image: url('img/header-bcg.png');
}
.box h1 {
  font-size: 40px;
  font-family: Bree serif;
  color: 33adae;
  margin-top: 30px;
  margin-right: 15px;
  line-height: 10px;
  float: right;
}
@media screen and (max-width: 768px) {
  .section1 {
    width: 100%;
  }
  .box {
    width: 100%;
    display: table;
    margin: 0;
    float: none;
    height: 100%;
  }
  .box h1 {
    text-align: center;
    margin: 0 auto;
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
  footer,
  nav {
    width: 100%;
  }
}

<div class="box">
  <h1><p>Moderní webdesign</p> za nejnižší ceny!</h1>
</div>

score 0 · Answer 3 · answered Nov 23 '15 at 15:17

0

H1 floated it's large as much as letters contained. Adding width 100% align can works.

answered Nov 23 '15 at 15:17

Germano Plebani

3,461
3
26
38

score 0 · Answer 4 · answered Nov 23 '15 at 15:21

0

You have a HTML error. <p> it´s not not allowed inside a heading.

Said that, you should use a <span> instead. Then you can center normally with text-align

CSS

 .box h1 {
    text-align: center;
    margin: 0 auto;
    line-height: 1em;
  }

DEMO HERE

answered Nov 23 '15 at 15:21

Luís P. A.

9,524
2
23
36

score 0 · Answer 5 · answered Nov 23 '15 at 15:29

You need to understand the difference between inline elements and block elements in HTML.

A block-level element always starts on a new line and takes up the full width available, when an inline element does not start on a new line and only takes up as much width as necessary.

Examples of inline elements in HTML:

<span></span>
<a href='#'></a>
<img src='#'></img>

Block elements:

<div>
<h1> - <h6>
<p>
<form>

score 0 · Answer 6 · answered Aug 07 '20 at 04:42

You can easily centre the heading bootstrap 4.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <h2 class="mx-auto">Centered Heading</h2>
    </div>
</div>

Centering a heading inside a div

6 Answers6