CODEWITHSUNDEEP
htmlcss
Jesper Andersen
Jesper Andersen

Reputation: 647

Div with Text, inside a div

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 Yes. A cat I know..

JSFiddle

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;
}

Upvotes: 3

Views: 1960

Answers (8)

xGeo
xGeo

Reputation: 2139

try adding magin: 0 auto; to #landingimg div

Upvotes: 0

user6781483
user6781483

Reputation:

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.

Upvotes: 0

Johann Kratzik
Johann Kratzik

Reputation: 794

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

Upvotes: 0

5eeker
5eeker

Reputation: 1027

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>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 0

Pegues
Pegues

Reputation: 1793

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;
}

Upvotes: 3

Velocitas
Velocitas

Reputation: 449

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>

Upvotes: 0

Shan
Shan

Reputation: 172

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;

    }

Upvotes: 1

Related Questions