newcoder1010 Posted November 18, 2019 Share Posted November 18, 2019 Hello, I have a heading tag: <h1> We buy cars city</h1> I like to break it as "we buy cars" (one line) and then "city" goes to second line. I can not break it in html. How to break it in two lines and then center the both lines? Thank you! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 18, 2019 Share Posted November 18, 2019 You hve two options use br tag, or wrap city in span and style it as a block element. Link to comment Share on other sites More sharing options...
JMRKER Posted November 18, 2019 Share Posted November 18, 2019 (edited) Example of 'dsonesuk's suggestion: <!DOCTYPE html><html lang="en"><head><title> Test Page </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> h1 { width: 20em; margin: 0 auto; text-align: center; background: wheat; color: magenta; } </style> </head><body> <h1> We buy <br> cars city</h1> <script> </script> </body></html> BTW, welcome to the forums. Edited November 18, 2019 by JMRKER Link to comment Share on other sites More sharing options...
Ingolme Posted November 18, 2019 Share Posted November 18, 2019 I usually give the tag a max-width in ems so that regardless of font size it always breaks at the same place. This solution requires no change to the HTML. Add text-align: center and a left and right margin of auto to keep it all centered. Link to comment Share on other sites More sharing options...
JMRKER Posted November 19, 2019 Share Posted November 19, 2019 Here is 'Ingolme's suggestion in a test script. Very similar to original but without <br> <!DOCTYPE html><html lang="en"><head><title> Test Page </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> h1 { /* width: 20em; /* single line */ margin: 0 auto; text-align: center; background: wheat; color: magenta; } h1.vertLine { width: 3em; } /* single vertical line */ h1.twoLines { width: 5em; } /* two horiz. lines */ </style> </head><body> <h1 class='vertLine'> We buy cars city</h1> <hr> <h1 class="twoLines"> We buy cars city</h1> <hr> <h1> We buy cars city</h1> <hr> <script> </script> </body></html> Link to comment Share on other sites More sharing options...
Sherin Posted November 28, 2019 Share Posted November 28, 2019 Give css property display flex and text-align center. <!DOCTYPE html> <html> <head> <style> h1{ display:flex; text-align : center; } </style> </head> <body> <h1> We buy cars <br/>city </h1> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 28, 2019 Share Posted November 28, 2019 Gosh! When i remove display: flex; it still works! Amazing! Link to comment Share on other sites More sharing options...
shaili_shah Posted December 31, 2019 Share Posted December 31, 2019 you can use <br> tag for break headings and apply style for display heading in center <html> <body> <h1 style="text-align:center"> We buy cars <br/>city </h1> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now