2

I wrote simple CSS to align text using the w3schools example with:

text-align:center

When I add an underline in the same format, the underline works.

Here's the snippet:

.CenterIt {
 text-align:center;
}
.UnderlineIt {
 text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>

Here's the w3schools page (the align text section): https://www.w3schools.com/css/css_align.asp

In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.

curls
  • 382
  • 1
  • 3
  • 16

4 Answers4

1

Try this. You need to wrap it with a container unit of <div>

<div class="UnderlineIt">
    <div class="CenterIt">Registration Form</div>
</div>

Following will work as well

<span class="UnderlineIt">
    <div class="CenterIt">Registration Form</div>
</span>
Mike Ross
  • 2,942
  • 5
  • 49
  • 101
  • That did it. It can't center within a span I suppose. But can center in a div. That makes sense. I hadn't thought of it at all. Thanks! – curls Sep 09 '19 at 00:58
  • The 3wschools, could add that centering needs a box or div... that would have been helpful there! – curls Sep 09 '19 at 01:06
1

It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.

user12039271
  • 11
  • 1
1

Because your html, is in wrong format. You cant have a span child of a span.

try like this:

<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>

to have the span centered , without a parent div you would need to put the display, as block. so you could have on your html and css like this:

span{display:block;}


 .CenterIt {
    text-align:center;
}
.UnderlineIt {
    text-decoration:underline;
}

html:

<span class="UnderlineIt CenterIt">Registration Form</span>
Ruben Marcus
  • 338
  • 1
  • 9
  • 1
    You can have a span inside a span with other tags. I've had it work. But the center needs something to center to, so that makes sense that a div outside it is needed! I haven't used blocks. That's interesting for me to look up and understand better. – curls Sep 09 '19 at 01:04
  • yes , you can do whatever you want,, but I think isnt semantic HTML. – Ruben Marcus Sep 09 '19 at 01:11
1

.CenterIt {
 text-align:center;
  display:block;
}
.UnderlineIt {
 text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>

The display property of span by default is inline. i.e.,

display:inline;

Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.

To make the text-align work for <span>, you need to change it into a block element.

Set

display: block;

for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.

Robin Baby
  • 357
  • 1
  • 6
  • This also gave me enough understanding to fix a problem where I couldn't get an image picture to fill a box I'd created. I need to put the class onto the img tag, not on a box around it! – curls Sep 09 '19 at 03:11
  • 1
    @curls. Glad to help. BTW, is a replaced inline element. More details here: https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level – Robin Baby Sep 09 '19 at 06:31