Question

在我的html应用程序中，我只想在span元素上添加一些居中文本，这里是我的jsfiddle：https://jsfiddle.net/19qwxkhf/9/

这是html和css：

<article class="tab-pane" id="tab-reporting">
  <section>
      <ul class="active">
        <li>
          <label>Test 1</label>
          <span class="badge badge-success">Test1</span>
          This text should be above Hello badge and centered
          <span class="badge badge-important">Hello</span>
        </li>
        <li>
          <label>Test 2</label>
          <span class="badge badge-success">Test1</span>
          This text should be above Hello 2 badge and centered
          <span class="badge badge-important">Hello 2</span>
        </li>
      </ul>
  </section>
</article>

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}


.badge-success {
  background: green !important;
  color: #fff !important;

  min-width: 0px !important;

  /* If you need */
  padding: 0px !important;

}

.badge-important {
  background: red !important;
  color: #fff !important;
}

#tab-reporting {
  padding-bottom: 100px;

  ul {
    list-style-type: none;

    &.inactive {
      margin-top: 25px;
      opacity: 0.3;
    }
  }

  label {
    width: 245px;
    margin-right: 15px;
  }

  li {
    margin-bottom: 5px;
    display: table;

    &.survey-start {
      margin-top: 15px;
    }

    > label {
      font-weight: normal;
      margin-left: 30px;
      padding-top: 7px;

      &.colspan {
        width: 100%;
      }
    }

    .colspan-nest {
      text-indent: 25px;
    }

    > span {
      display: table-cell;
      min-width: 175px;
      vertical-align: middle;
      text-align: center;
      border-radius: 0;
      background: #ddd;
      padding: 7px;

      &.no-background {
        background: none;
      }
    }
  }

  .txt {
    padding-left: 5px;
  }

  .lh {
    font-size: 1.8em;
    padding: 12px 0 5px;
  }
}
  ul {
    list-style-type: none;
    padding: 0;
  }
span {
  width: 100px;
}

它应该是这样的：

Answer 1

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

section {
  width: 300px;
}

.column {
  width: calc(50% - 2px);
  display: inline-block;
}

.badge-success {
  background: green !important;
  color: #fff !important;
  min-width: 0px !important;
  /* If you need */
  padding: 0px !important;
}

.badge-important {
  background: red !important;
  color: #fff !important;
}

#tab-reporting {
  padding-bottom: 100px;
  ul {
    list-style-type: none;
    &.inactive {
      margin-top: 25px;
      opacity: 0.3;
    }
  }
  label {
    width: 245px;
    margin-right: 15px;
  }
  li {
    margin-bottom: 5px;
    display: table;
    &.survey-start {
      margin-top: 15px;
    }
    > label {
      font-weight: normal;
      margin-left: 30px;
      padding-top: 7px;
      &.colspan {
        width: 100%;
      }
    }
    .colspan-nest {
      text-indent: 25px;
    }
    > span {
      display: table-cell;
      min-width: 175px;
      vertical-align: middle;
      text-align: center;
      border-radius: 0;
      background: #ddd;
      padding: 7px;
      &.no-background {
        background: none;
      }
    }
  }
  .txt {
    padding-left: 5px;
  }
  .lh {
    font-size: 1.8em;
    padding: 12px 0 5px;
  }
}

ul {
  list-style-type: none;
  padding: 0;
}

＆＃13;

<article class="tab-pane" id="tab-reporting">
  <section>
    <div class="column">
      <span style="display:block;text-align:center;">Referrals sent</span>
      <ul class="active">
        <li>
          <span class="badge badge-success">View details</span>
        </li>
        <li>
          View details
        </li>
      </ul>
    </div>
    <div class="column">
      <span style="display:block;text-align:center;">Patient response</span>
      <ul class="active">
        <li>
          <span class="badge badge-important">View details</span>
        </li>
        <li>
          <span class="badge badge-success">View details</span>
        </li>
      </ul>
    </div>
  </section>
</article>

＆＃13;

Answer 2

更改此部分代码： - <span class="badge badge-success" style="display:block;">Test1</span> <center>This text should be above Hello badge and centered</center>

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}


.badge-success {
  background: green !important;
  color: #fff !important;

  min-width: 0px !important;

  /* If you need */
  padding: 0px !important;

}

.badge-important {
  background: red !important;
  color: #fff !important;
}

#tab-reporting {
  padding-bottom: 100px;

  ul {
    list-style-type: none;

    &.inactive {
      margin-top: 25px;
      opacity: 0.3;
    }
  }

  label {
    width: 245px;
    margin-right: 15px;
  }

  li {
    margin-bottom: 5px;
    display: table;

    &.survey-start {
      margin-top: 15px;
    }

    > label {
      font-weight: normal;
      margin-left: 30px;
      padding-top: 7px;

      &.colspan {
        width: 100%;
      }
    }

    .colspan-nest {
      text-indent: 25px;
    }

    > span {
      display: table-cell;
      min-width: 175px;
      vertical-align: middle;
      text-align: center;
      border-radius: 0;
      background: #ddd;
      padding: 7px;

      &.no-background {
        background: none;
      }
    }
  }

  .txt {
    padding-left: 5px;
  }

  .lh {
    font-size: 1.8em;
    padding: 12px 0 5px;
  }
}
  ul {
    list-style-type: none;
    padding: 0;
  }
span {
  width: 100px;
}

<article class="tab-pane" id="tab-reporting">
  <section>
      <ul class="active">
        <li>
          <label>Test 1</label>
          <span class="badge badge-success"  style="display:block;">Test1</span>
          <center>This text should be above Hello badge and centered</center>
          <span class="badge badge-important">Hello</span>
        </li>
        <li>
          <label>Test 2</label>
          <span class="badge badge-success" style="display:block;">Test1</span>
          <center>This text should be above Hello 2 badge and centered</center>
          <span class="badge badge-important">Hello 2</span>
        </li>
      </ul>
  </section>
</article>

在span元素上添加居中文本

2 个答案: