Div with Text, inside a div

Question

I am currently trying to insert a div with text and a background inside of a container div.

The text div won't center nor be vertically centered.

The final result should look something like this

For now I have this

<div id="landingimg">
    <div>
        <h1>Velkommen til hele Danmarks Fristad!</h1>
    </div>
</div>

#landingimg {
    background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
    width: 960px;
    max-width:100%;
    height: 470px;
}

#landingimg div h1 {
    text-align: center;
}

#landingimg div {
    background-color: rgba(43, 44, 44, 0.5);
    width: 400px;
    height: 100px;
    margin: 0 auto;
}

Mate you are missing the angle bracket while closing the h1. — Pragyakar, Dec 13 '16 at 13:36
Possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — secelite, Dec 13 '16 at 13:38
Actually the angle bracket is not the problem. You should firstly position div and then set its top. And thats it. — Nejc Rodošek, Dec 13 '16 at 13:38

score 3 · Accepted Answer · answered Dec 13 '16 at 13:47

You have incomplete CSS, as well as a couple errors both in your CSS and HTML. I put together a JSFiddle for you to view and use as a guide for correcting your problem and achieving what you need. My solution will take care of centering your inner div, as well as make that inner div display: table; and the h1 display: table-cell.

The reason for this is because you not only want to center your div text on the page, but you also want to center your text in your div (h1) both horizontally and vertically. The only way to center your text properly vertically in it's parent container is to use display: table-cell; along with vertical-align: middle;

You can view the JSFiddle here: https://jsfiddle.net/Lxpg4bxn/

Your HTML should be the following:

<div id="landingimg">
  <div class="inner">
    <h1>
      Velkommen til hele Danmarks Fristad!
    </h1>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

And you should use the following CSS:

.clear {
  clear: both;
}
#landingimg{
  position: relative;
  background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
  width: 960px;
  max-width:100%;
  height: 470px;
  background-size: cover;
  font-family: Arial, Helvetica, Sans-serif;
}
#landingimg div.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(43, 44, 44, 0.5);
  width: 400px;
  height: 100px;
  margin: -50px 0 0 -200px;
  display: table;
}
#landingimg div.inner > h1{
  padding: 0;
  margin: 0;
  text-align: center;
  color: #fff;
  font-weight: normal;
  display: table-cell;
  vertical-align: middle;
}

score 1 · Answer 2 · answered Dec 13 '16 at 13:43

Add this to inner div and Change Size according to need

 <div id="landingimg">
             <div class="innerDiv">
             <h1>
               Velkommen til hele Danmarks Fristad!
             </h1
                </div>
                </div>

CSS

 .innerDiv{
        position: absolute;
    top: 50%;
    right: 50%;
    width: 250px;
    height: 143px;

    }

score 0 · Answer 3 · answered Dec 13 '16 at 13:44

Please take a look at this article: Centering in CSS

#landingimg{
  background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
  width: 960px;
  max-width:100%;
  height: 470px;
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#landingimg div h1{

  text-align: center;
  
}
#landingimg div{
  background-color: rgba(43, 44, 44, 0.5);
  width: 400px;
  height: 100px;
  margin: 0 auto;

           <div id="landingimg">
             <div class="child">
             <h1>
               Velkommen til hele Danmarks Fristad!
             </h1>
                </div>
                </div>

score 0 · Answer 4 · answered Dec 13 '16 at 13:47

Use <img> instead of background-image, then use positioning in CSS.

Have a look at the snippet below:

#landingimg{
  width: 960px;
  max-width:100%;
}

#landingimg div h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 24px;
}
#landingimg div{
  background-color: rgba(43, 44, 44, 0.5);
  margin: 0 auto;
  position: relative;
}

img {
  max-width: 100%;
}

<div id="landingimg">
   <div>
     <img src="https://www.icr.org/i/wide/cat_walking_wide.jpg" alt="">
     <h1>
       Velkommen til hele Danmarks Fristad!
     </h1>
  </div>
</div>

Hope this helps!

score 0 · Answer 5 · edited Dec 13 '16 at 16:27

0

try adding magin: 0 auto; to #landingimg div

edited Dec 13 '16 at 16:27

Ryan Poolos

18,421
4
65
98

answered Dec 13 '16 at 13:48

xGeo

2,149
2
18
39

score 0 · Answer 6 · answered Dec 13 '16 at 13:49

Can you try this code. I have added the main container div as relative and the inner div as absolute :

#landingimg{
  background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
  width: 960px;
  max-width:100%;
  height: 470px;
  position:relative;
}

#landingimg div h1{

  text-align: center;
  
}
#landingimg div{
  background-color: rgba(43, 44, 44, 0.5);
  width: 400px;
  height: 100px;
  position:absolute;
  top:70px;
  left:100px;
  }

           <div id="landingimg">
             <div>
             <h1>
               Velkommen til hele Danmarks Fristad!
             </h1>
                </div>
                </div>

score 0 · Answer 7 · answered Dec 13 '16 at 13:51

One more solution without absolute positioning:

#landingimg{
    background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
    width: 960px;
    max-width:100%;
    height: 470px;
    display: table;
    background-size: cover;
    text-align: center;
}
#landingimg div h1{
    text-align: center;
    display: inline-block;
    margin: 0;
    background-color: rgba(43, 44, 44, 0.5);
    width: 400px;
    padding: 20px 0;
}
#landingimg div{
    display: table-cell;
    vertical-align: middle;
}

Fiddle: https://jsfiddle.net/Lpcy6kew/8

score 0 · Answer 8 · answered Dec 13 '16 at 13:53

This worked based on some mathematical calculation with the px

<div id="landingimg">
     <div class="center">
         <h1>
           Velkommen til hele Danmarks Fristad!
         </h1
      </div>
</div>

#landingimg{
  background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
  width: 960px;
  max-width:100%;
  height: 470px;
  padding-top: 50px;
}

#landingimg div h1{

  text-align: center;

}
.center{
  background-color: rgba(43, 44, 44, 0.5);
  width: 400px;
  height: 100px;
  margin: auto;
}

Adding the class isn't necessary.

Div with Text, inside a div

8 Answers8