Jump to content

[HTML & CSS] Text between borders


Stefany93

Recommended Posts

How to make border appear on the left and right sides of text? 

 

Let's say we have a div 200px x 100px with red border and ID of "container"

 



<style type="text/css">
   *{padding:0; margin:0;}
   #container{
      width:200px;
      height:100px;
      border:2px solid red;
   }
</style>
<div id="container">
   <p>Happy Potter</p>
   He was an awesome wizard!
</div>


 

Now we want to put the paragraph "Happy Potter" on the top of the div box between the red border. 

We do that by defining negative margin which will push up the paragraph like this:

 



#container p{
      margin-top:-15px;
   }


 

Now our paragraph is in between the border, almost how we want it to be. 

 

pic1.png

 

Next we want to push it in the middle. So we use margin-left:

 



#container p{
      margin-top:-15px;
                margin-left:50px;
   }


 

I'd suggest adjusting the left margin i.e. the pushing to the center thing with the developer tools of your browser ( right click on top of the element and Firebug ( for FF ) or Google Chrome Developer tools will pop up )

 

pic2.png

 

 

Next we want to remove the border that is overlapping the text. We do that by defining width of the text and giving it a background color that is the same as the div container and the outside area of it like this:

 

 



#container p{
      margin-top:-15px;
      margin-left: 50px;
      width: 83px;
      background: pink;
   }


 

In my case the background color of both the container div and the area outside of it was pink so I gave the same color to the paragraph after defining its width. We have the final result:

 

pic3.png

 

And now we and Harry Potter are happy :)

 

Final code:

 



<style type="text/css">
   *{padding:0; margin:0;}
   #container{
      width:200px;
      height:100px;
      border:2px solid red;
   }
   #container p{
      margin-top:-15px;
      margin-left: 50px;
      width: 100px;
      background: pink;
   }
</style>
<div id="container">
   <p>Happy Potter</p>
   He was an awesome wizard!
</div>


Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.