CODEWITHSUNDEEP
html
darkchampionz
darkchampionz

Reputation: 1224

HTML justify content and span

.d1 {
    background-color: red;
    display: flex;
    justify-content: center;
}
.s1 {
    color: blue;
}
<div class="d1">
    <u>list:</u>
    <br>item1
    <br>item2
    <br><span class="s1">item3</span>
</div>

I am trying to make a div where its contents are aligned in the center. I use the above code to display the text list: item1 item2 item3 one below the other, list: underlined and the item3 to have blue color but this gives so strange results:

enter image description here

item1 and item2 but item3 is... on top and next to list:... What's the matter and how can I fix this? Ty

Upvotes: 1

Views: 126

Answers (5)

Haitham Adnan Mubarak
Haitham Adnan Mubarak

Reputation: 293

You can use <li> along with <u> and add u li {list-style-type: none;} to disable list item circle.

Check this : 

.d1 {
    background-color: red;
    display: flex;
    justify-content: center;
}
.s1 {
    color: blue;
}
u li {list-style-type: none;}
<div class="d1">
    <u>list:
     <li>item1</li>
     <li>item2</li>
     <li><span class="s1">item3</span></li>
    </u>
</div>

Upvotes: 2

Jeremy Clarkson
Jeremy Clarkson

Reputation: 165

.d1 {
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.s1 {
    color: blue;
}
<div class="d1">
    <u>list:</u>
    <br>item1
    <br>item2
    <br><span class="s1">item3</span>
</div>

Result okay?

Upvotes: 1

shourav
shourav

Reputation: 996

why you used <u> tag and "display:flex". If you use display:flex then its child nodes will take the whole height and <u>list:</u>, <span class="s1">item3</span> have done that and created 3 column. besides other content are not considered as the child nodes. You can see the link to clear the idea of flex

Upvotes: 0

marpme
marpme

Reputation: 2435

You could make you usage of an unsorted list like this one here: If you need a more specific solution let me know that!

.d1 {
    background-color: red;
    justify-content: center;
    display: block;
    text-align: center
}
.s1 {
    color: blue;
}
<div class="d1">
<p>Items:</p>
<lu>
  <li>item1</li>
  <li>item2</li>
  <li><span class="s1">item3</span></li>
 </lu>
 </div>

Upvotes: 1

Papershine
Papershine

Reputation: 5223

You can fix this by not using flex but inline-block and a wrapper <div> instead.

.d1 {
    background-color: red;
    text-align: center;
}
.d2 {
    display: inline-block;
    text-align: left;
}
.s1 {
    color: blue;
}
<div class="d1">
    <div class="d2">
        <u>list:</u>
        <br>item1
        <br>item2
        <br><span class="s1">item3</span>
    </div>
</div>

Upvotes: 2

Related Questions