Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML SVG Basics Introduction to SVG SVGs as Images

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

text not centered on picture

When I try the background attribute with a different svg file the text does not center on the picture Imgur

I was thinking that this might be the case because the image opens like this Imgur . small svg on a big white page. If that is the case how can I solve this ?

Here is my code 

.graphic-simple,
.graphic-with-text{
margin: 1em auto;
width:20%;
}
.graphic-with-text{
  color: #FF6600;
  background: transparent url("../img/log1.svg") center center no-repeat;

  height:700px;
}

   <div class="wrapper">

    <div class="graphic-simple">
      <img src="img/log1.svg" alt="people">
    </div>

    <div class="graphic-with-text">
      <p>It's the final countdown </p>
    </div>

   </div>
jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

I think could help if you made this in codePen. You could just paste the SVG in to the HTML like this:

<body>
<h1>Embedded SVG</h1>

<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-size="30">My SVG</text>
</svg>

</body>

8 Answers

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

The reason this isn't working is because, by default the p tag is displayed as a block which means it stays at the top of it's parent element (the div with the class, graphic-with-text). Because the height of the parent element was 700px, the background was aligning centrally, but the p tag wasn't, again, because of it's default positioning.

What you are going to need to do (because I don't know an easy way to host SVG images so that you can use them in the CSS of the CodePen), is to use sublime texts. Use the code you gave me in the CodePen and do one of the following things:

a. Delete the line of code that specifies the height in .graphic-with-text.

b. set a specific top for the p tag in css. Something like: 

p {
    position: relative;
    top: 50%;
}
jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

Thanks Elena Paraschiv. I really couldn't tell you why. I copied your files in to Brackets, referred to main.css in index.html and it centred the SVG as the background. One thing I can recommend is to add text-align: center; to .graphic-with-text. This has worked for me before with regards to centring images.

Another thing worth a try is to use the individual CSS background properties instead of the shorthand CSS background property (background-position and then background-repeat).

The third and final thing is to use this SVG file (I just got rid of the top part): 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-257 380.8 80.1 80.1" style="enable-background:new -257 380.8 80.1 80.1;" xml:space="preserve">
<path d="M-208.6,398.7c3.7,2.3,6.3,6.3,6.8,10.8c1.5,0.7,3.2,1.1,5,1.1c6.5,0,11.8-5.3,11.8-11.8c0-6.5-5.3-11.8-11.8-11.8
    C-203.3,387.1-208.5,392.3-208.6,398.7z M-216.3,422.7c6.5,0,11.8-5.3,11.8-11.8s-5.3-11.8-11.8-11.8c-6.5,0-11.8,5.3-11.8,11.8
    C-228.1,417.5-222.8,422.7-216.3,422.7z M-211.4,423.5h-10c-8.3,0-15,6.8-15,15v12.2l0,0.2l0.8,0.3c7.9,2.5,14.8,3.3,20.5,3.3
    c11.1,0,17.5-3.2,17.9-3.4l0.8-0.4h0.1v-12.2C-196.3,430.3-203.1,423.5-211.4,423.5z M-191.9,411.4h-9.9c-0.1,4-1.8,7.5-4.5,10.1
    c7.4,2.2,12.8,9,12.8,17.1v3.8c9.8-0.4,15.4-3.1,15.8-3.3l0.8-0.4h0.1v-12.2C-176.9,418.2-183.6,411.4-191.9,411.4z M-237,410.6
    c2.3,0,4.4-0.7,6.3-1.8c0.6-3.8,2.6-7,5.5-9.3c0-0.2,0-0.4,0-0.7c0-6.5-5.3-11.8-11.8-11.8c-6.5,0-11.8,5.3-11.8,11.8
    C-248.7,405.4-243.5,410.6-237,410.6z M-226.4,421.5c-2.7-2.6-4.3-6.1-4.5-10c-0.4,0-0.7-0.1-1.1-0.1h-10c-8.3,0-15,6.8-15,15v12.2
    l0,0.2l0.8,0.3c6.4,2,12,2.9,16.9,3.2v-3.7C-239.2,430.5-233.8,423.7-226.4,421.5z"/>
</svg>

What code editor are you using/ where are you hosting your files?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

can you have a look at this one again?I added your suggestions http://codepen.io/elena_bri/pen/yeqxve?editors=1100

Otherwise I use Sublime 2

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

I cut the p tag and pasted it above the image like this: http://codepen.io/anon/pen/VeBGBB?editors=1100. Is that what you were after?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

No. I want to center the text on the svg

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

Oh I see like @7:31 in the video, right?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Yes. With the svg that Nick posted it worked for me and then I tried with another one . And it doesn't work anymore

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Adding 

p {
    position: relative;
    top: 50%;
}

worked fine, but after that I had to re-add the height. Otherwise the image was too small for the text.

Thanks for the help awesomedude /

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

Ohhhhhhhhhh, you could also set the .graphic-with-text to width: 170px; and height: 170px;. The reason for these dimensions is because they adhere to the natural width of the length of the words in the p tag (if that makes sense).

EDIT While leaving the p tag's CSS as I suggested

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Yes. Nick said that too : )