等宽进度条标签和垂直居中

Question

我试图将所有进度条“推”到右侧，同时将它们垂直居中，以便它看起来像这样：

我尝试过使用带有第一个bar类的inline-block并给它一个有效的宽度，但如果我这样做的话，我的进度条不会垂直居中于文本。

JSFiddle

.first-bar {
  display: flex;
  align-items: center;
}

<div class="software-info">
  <h3>Software</h3>
  <div class="first-bar">
    <span>Indesign CC</span>
    <progress value="100" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Illustrator CC</span>
    <progress value="90" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Photoshop CC</span>
    <progress value="80" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Illustrator CC</span>
    <progress value="70" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>HTML 5</span>
    <progress value="60" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>CSS 3</span>
    <progress value="50" max="100"></progress>
  </div>
</div>

Answer 1

只需将width或min-width设置为<span>，或将flexbox方式flex或flex-basic设置为可以包含所有文本但不包装的值

或者，您可以使用CSS表格布局（添加包装div first-bars），同一列中的所有单元格将自动相等宽度，因此不需要固定的宽度值。

＆＃13;

＆＃13;

.first-bars {
  display: table;
}

.first-bar {
  display: table-row;
}

.first-bar span,
.first-bar progress {
  display: table-cell;
  vertical-align: middle;
}

.first-bar span {
  padding-right: 10px;
}

＆＃13;

<div class="software-info">
  <h3>Software</h3>
  <div class="first-bars">
    <div class="first-bar">
      <span>Indesign CC</span>
      <progress value="100" max="100"></progress>
    </div>
    <div class="first-bar">
      <span>Illustrator CC</span>
      <progress value="90" max="100"></progress>
    </div>
    <div class="first-bar">
      <span>Photoshop CC</span>
      <progress value="80" max="100"></progress>
    </div>
    <div class="first-bar">
      <span>Illustrator CC</span>
      <progress value="70" max="100"></progress>
    </div>
    <div class="first-bar">
      <span>HTML 5</span>
      <progress value="60" max="100"></progress>
    </div>
    <div class="first-bar">
      <span>CSS 3</span>
      <progress value="50" max="100"></progress>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

内联块方法也有效，您只需设置vertical-align: middle;即可重置默认值baseline。

＆＃13;

＆＃13;

.first-bar span,
.first-bar progress {
  display: inline-block;
  vertical-align: middle;
  width: 6em;
}

＆＃13;

<div class="software-info">
  <h3>Software</h3>
  <div class="first-bar">
    <span>Indesign CC</span>
    <progress value="100" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Illustrator CC</span>
    <progress value="90" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Photoshop CC</span>
    <progress value="80" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Illustrator CC</span>
    <progress value="70" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>HTML 5</span>
    <progress value="60" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>CSS 3</span>
    <progress value="50" max="100"></progress>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以为span提供宽度值。

＆＃13;

＆＃13;

.first-bar {
  display: flex;
  align-items: center;
}

.first-bar span {
  min-width: 7em;
}

＆＃13;

<div class="software-info">
  <h3>Software</h3>
  <div class="first-bar">
    <span>Indesign CC</span>
    <progress value="100" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Illustrator CC</span>
    <progress value="90" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Photoshop CC</span>
    <progress value="80" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>Illustrator CC</span>
    <progress value="70" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>HTML 5</span>
    <progress value="60" max="100"></progress>
  </div>
  <div class="first-bar">
    <span>CSS 3</span>
    <progress value="50" max="100"></progress>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;