Photoshop Question posted in
The official user guide can be found here.

Equal width progress bar labels and center vertically – Photoshop

I am trying to “push” all the progress bars to the right while centering them vertically so that it looks like this:

enter image description here

I’ve tried giving using inline-block with the first-bar class and giving it a width which works, but my progress bars wont center vertically with the text if I do it that way.

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>
Tags:

2

Answers


  1. 0

    You can give the span a width value.

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

.first-bar span {
  min-width: 7em;
}
    <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>
    Login or Signup to reply.
  2. 0

    Just simply set width or min-width to the <span>, or the flexbox way flex or flex-basic with a value that can hold all text without wrapping.

    Alternatively, you can use CSS table layout (added a wrapper div first-bars), all cells in the same column will be equal width automatically, therefore no fixed width value is needed.

    .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;
}
    <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>

    The inline block approach also works, you just need to set vertical-align: middle; to reset the default value baseline.

    .first-bar span,
.first-bar progress {
  display: inline-block;
  vertical-align: middle;
  width: 6em;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search