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 trying make div contents aligned in center. use above code display text list: item1 item2 item3 1 below other, list: underlined , item3 have blue color gives strange results:

enter image description here

item1 , item2 item3 is... on top , next list:... what's matter , how can fix this? ty

you can fix not using flex inline-block , 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>


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -