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>


Edited by Stefany93
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.