Align underline under the texts in a horizontal div

Question

In this Question, I followed w3d user answer but didn't get divs under the top divs.

CSS

div.demo {
    display:table;
    width:100%;
}
div.demo span {
    display:table-cell;
    text-align:center;
}
#under {
    width:100px;
    height:2px;
    background-color:blue;
}

HTML

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>
<div class="demo">
    <span><div id='under'></div></span>
    <span><div id='under'></div></span>
    <span><div id='under'></div></span>
</div>

JSFiddle

Love Trivedi · Accepted Answer · 2013-09-10T10:08:05.677

1

Try this css for under id

#under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto; /*ADDED*/
}

Note: Use class instead of ID because you are using under id many times in single page.

Here is a valid HTML

<div class="demo">
    <div>Span 1</div>
    <div>Span 2</div>
    <div>Span 3</div>
</div>
<div class="demo">
    <div><span class="under"></span></div>
    <div><span class="under"></span></div>
    <div><span class="under"></span></div>
</div>

And here is CSS

div.demo {
    display:table;
    width:100%;
}
div.demo div {
    display:table-cell;
    text-align:center;
}
.under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto;
    display:block;
}

DEMO HERE

edited Sep 10 '13 at 10:08

answered Sep 10 '13 at 09:56

Love Trivedi

3,899
3
20
26

ok, I'll use class. But how did you think to add margin?. I didn't add margin to the upper div? – Lonely Sep 10 '13 at 10:01
you give text-align center to upper div, so text aligned center of span. and Note: div is not allowed as child of span tag. so change your html structure – Love Trivedi Sep 10 '13 at 10:03
Can you help me with the new css (As div is not allowed as a child of span) – Lonely Sep 10 '13 at 10:04
valid html and css added below answer – Love Trivedi Sep 10 '13 at 10:08

score 1 · Answer 2 · answered Sep 10 '13 at 10:29

I know you've already accepted an answer, but maybe consider using border-spacing and border-bottom?

JSFiddle

CSS

div.demo {
    border-spacing: 75px 0;
    display: table;
    width: 100%;
}

div.demo span {
    border-bottom: 2px solid blue;
    display: table-cell;
    text-align: center;
}

HTML

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

Align underline under the texts in a horizontal div

2 Answers2

CSS

HTML