-3

I want to put some text inside of my container <div> and also center that text.

.hr {
  background: green;
  height: 50px; margin: 65px 0; width: 3000px;
}
<div class="hr"></div>

An image of how my project looks like:

enter image description here

My code as an image:

enter image description here

Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Plamen
  • 1
  • 3
    post your code as snippet **not** as image! – Sebastian Brosch Jan 06 '17 at 15:45
  • 2
    It is quite hard to understand what you want from images and code is barely readible – Imphusius Jan 06 '17 at 15:47
  • I wanna put and center text in my green container. To create the container i used hr and div: CSS: .hr { background:url(https://userscontent2.emaze.com/images/ac315fff-308a-4fc6-9f69-1a60c07df893/988a7b30caade3fa457f9941d5880985.jpg); height: 50px; margin: 65px 0; width: 3000px; } HTML:
    – Plamen Jan 06 '17 at 15:50
  • could you please give the code that you are using – Gokul P P Jan 06 '17 at 16:15
  • html:
    css: .hr { background:url(https://userscontent2.emaze.com/images/ac315fff-308a-4fc6-9f69-1a60c07df893/988a7b30caade3fa457f9941d5880985.jpg); height: 50px; margin: 65px 0; width: 3000px; }     – Plamen Jan 06 '17 at 16:23

1 Answers1

1

I have just changed image by a color and added a text-align:center

.hr { 
  background:#f00; 
  height: 50px; 
  margin: 65px 0; 
  width: 3000px; 
  text-align:center;
}
<div class="hr"><span>text</span> </div>

is that you looking for?

Gokul P P
  • 962
  • 8
  • 27
  • Hey, thanks for reply! That is not the exact thing im looking for but my major problem is that my text is not centered even if i am using the tag. Any advices? – Plamen Jan 06 '17 at 16:55
  • @Plamen : couldn't get you, by using the `text-align:center` tag the text aligned to center of the div you can see that on the snippet – Gokul P P Jan 06 '17 at 17:06
  • my problem is that when i enter the text it is not centered(sample heading): http://imgur.com/2pnN8ZJ. These are my codes: html:

    Sample Heading

    css: .hr { background:url(https://userscontent2.emaze.com/images/ac315fff-308a-4fc6-9f69-1a60c07df893/988a7b30caade3fa457f9941d5880985.jpg); height: 50px; margin: 65px 0; width: 3000px; }     – Plamen Jan 06 '17 at 17:36
  • @Plamen : the problem is with the width that you set could you please set the width to `100%` instead of `3000px` – Gokul P P Jan 07 '17 at 04:40
  • Yep i solved the problem using this solution! The problem was that container's width was greater than the browser window. – Plamen Jan 08 '17 at 21:40