How to make h1 and underline both center align

HTML & CSS
1

hi all
i want to center align both the h1 and underline effect

if i add “text-align:center” to h1 then h1 gets center align
but the underline remains still left.

how to make both center align.

vineet

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1{
color:#F00; 
border:1px solid #CCC;
}
h1:after{
    border-bottom:8px solid green;
    display: block;
    margin-left:35px;
    content: " ";
	width:20px;
}
</style>
</head>

<body>
<h1>welcome</h1>
</body>
</html>
2

Why are you applying this section of styling to your <h1>? What are you trying to achieve with it?

3

You could try this and see if it’s more as you’d envisaged.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
      h1 {
        border: 1px solid #ccc;
        color: #f00;
        text-align: center;
        text-decoration: underline;
        text-decoration-color: green;
      }
    </style>
  </head>
  <body>
    <h1>welcome</h1>
  </body>
</html>
4

hi chris

i want to have a underline effect of just 2 letters.

i dont want to underline full heading.

thats what my code does

vineet

5

Which two letters need underlining? Basically, you need to wrap those two letters in <span></span> tags and apply your chosen style to that tag. Something like this…

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
      h1 {
        color: #F00;
        border: 1px solid #CCC;
        text-align: center;
      }
      .underline-this {
        text-decoration: underline;
        text-decoration-color: green;
      }
    </style>
  </head>
  <body>
    <h1><span class="underline-this">we</span>lcome</h1>
  </body>
</html>
6

Hi there vinpkl,

here is one possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
h1 {
    max-width: 8em;
    line-height: 0.4em;
    padding: 1em 1em 0.75em;
    margin: 0 auto;
    border: 0.062em solid #ccc;
    border-radius: 0.4em;
    background-color: #fff;
    box-shadow: inset  0 0 0.4em rgba( 0, 0, 0, 0.3 ), 
            0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
    color: #555; 
    text-align: center;
 }
h1::after {
    display: inline-block;
    width: 0.9em;
    padding-top: 0.25em;
    margin-left: -2em;
    border-radius: 0.5em;
    background-color: #555;
    content: '';
 }
</style>
</head>
<body>
 <h1>welcome<br></h1>
</body>
</html>

coothead

7

hi coothead

yes this works great.

but can it be done without adding <br tag in heading ?

vineet

8

Use display:table (or block as width is required) and then margin:auto to centre it.


h1::after {
    display: table;
    width: 0.9em;
	height:.3em;
    margin:.25em auto;
    border-radius: 0.5em;
    background-color: #555;
    content: '';
 }

You can pull it left or right with relative positioning if needed but it is unclear which letters you are trying to underline.

Using your example:


h1 {
	color:#F00;
	border:1px solid #CCC;
	text-align:center;
}
h1:after {
	border-bottom:8px solid green;
	display: block;
	margin:0 auto;
	content: " ";
	width:20px;
	position:relative;
	left:-20px;
}
9

So why are you having a problem with the “br” element ? :rolleyes:

coothead

10

As @paulOB and @coothead have shown, it is possible, but it’s difficult to provide concrete advice, when we don’t have the full picture of your ‘use case’, nor an understanding of which characters you are targeting. If you can provide some guidance on those points, we’ll be better able to help you out.

  1. Which characters are you targeting?
  2. What effect are you trying achieve and why?
  3. What is the concern over the use of the <br> tag?
2 Likes
11

thanks PaulOB

your solution works great.

i was trying to underline the center words of the heading.

“co” in welcome

vineet

12

hi chris

i was trying to underline “co” in welcome

center two character in heading welcome

vineet

13

hi coothead

i didnt had any problem with br

just asking if it was possible to do it without adding br

vineet

14

so PaulOB example is working great for me

vineet

15

Just so ya know…

“co” are letters within the word “welcome”, not words. :smiley_cat:

2 Likes
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.