将内容与Image对齐时感到困惑

Question

我正在编写一个HTML代码，其中有span个带有一些文字和旁边的图像。

我正在尝试执行以下操作。

1. 垂直居中的内容。
2. 将div宽度设为内容宽度。即单词应该是单行而不是中断。
3. 让内容从左开始（稍后我将摆脱边框，它将显示为4列网格）。

工作小提琴。 https://jsfiddle.net/vqvjtsLz/2/

.resultTable {
  margin-top: 0.85em;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 1px 7.5px 0 rgba(217, 217, 217, 0.3);
}

.combiNum {
  height: 25%;
  text-transform: uppercase;
  color: #1779d0;
}

.combiDiv {
  display: flex;
  height: 25%;
  text-align: left;
  align-items: left;
  margin-left: 2%;
}

span.mainspan0,
span.mainspan1,
span.mainspan2,
span.mainspan3 {
  border: 1px solid;
  width: 22%;
  padding: 0.85em;
  display: inline-block;
  vertical-align: middle;
}

.logoImageSpan {
  float: left;
  margin-top: 3%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  height: 50px;
  width: 50px;
  margin-left: -2%;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: white;
}

span.elementClass {
  text-align: left;
  display: block;
  text-transform: capitalize;
}

<div class="resultTable" id="resultTable">
  <div class="combiNum">Combination #1</div>
  <div class="combiDiv">
    <span class="mainspan0">
                    <span class="logoImageSpan">
                        <img src="https://image.ibb.co/jphBQR/sulphide.png" alt="sulphide" border="0" />
                    </span>
    <span id="element1" class="elementClass">Sulphates</span>
    <span id="element2" class="elementClass">0.575</span>
    </span>
    <span class="mainspan1">
                    <span class="logoImageSpan">
                        <img src="https://image.ibb.co/jRjQkR/alcohol.png" alt="alcohol" border="0" />
                    </span>
    <span id="element1" class="elementClass">Alcohol</span>
    <span id="element2" class="elementClass">10.25</span>
    </span>
    <span class="mainspan2">
                    <span class="logoImageSpan">
                        <img src="https://image.ibb.co/cPWGs6/sulphurdioxide.png" alt="sulphurdioxide" border="0" />
                    </span>
    <span id="element1" class="elementClass">Total sulfur dioxide</span>
    <span id="element2" class="elementClass">98.5</span>
    </span>
    <span class="mainspan3">
                    <img src="https://image.ibb.co/bT70Km/next.png" alt="next" border="0" />
                </span>
  </div>
</div>

Answer 1

mainspan0..3获得了以下更改：

display: flex;
   align-items: center; /*Aligns contents vertically */
  justify-content: center; /*Aligns contents horizontally */
  text-align: center; /*Aligns further text in the center */
  flex-direction:column; /*By default its row, you can change to column for vertical alignment */
  font-size:2vw;

已修改elementClass，因此文本不会中断：

span.elementClass {
  flex:1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-transform: capitalize;
}

.resultTable {
  margin-top: 0.85em;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 1px 7.5px 0 rgba(217, 217, 217, 0.3);
}

.combiNum {
  height: 25%;
  text-transform: uppercase;
  color: #1779d0;
}

.combiDiv {
  display: flex;
  height: 25%;
  text-align: left;
  align-items: left;
  margin-left: 2%;
}

span.mainspan0,
span.mainspan1,
span.mainspan2,
span.mainspan3 {
  border: 1px solid;
  width: 22%;
  padding: 0.85em;
  display: flex;
   align-items: center; /*Aligns contents vertically */
  justify-content: center; /*Aligns contents horizontally */
  text-align: center; /*Aligns further text in the center */
  flex-direction:column; /*By default its row, you can change to column for vertical alignment */
  font-size:2vw;

}

.logoImageSpan {
  float: left;
  margin-top: 3%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  height: 50px;
  width: 50px;
  margin-left: -2%;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: white;
}

span.elementClass {
  flex:1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-transform: capitalize;
}

<div class="resultTable" id="resultTable">
  <div class="combiNum">Combination #1</div>
  <div class="combiDiv">
    <span class="mainspan0">
                <span class="logoImageSpan">
                    <img src="https://image.ibb.co/jphBQR/sulphide.png" alt="sulphide" border="0" />
                </span>
    <span id="element1" class="elementClass">Sulphates</span>
    <span id="element2" class="elementClass">0.575</span>
    </span>
    <span class="mainspan1">
                <span class="logoImageSpan">
                    <img src="https://image.ibb.co/jRjQkR/alcohol.png" alt="alcohol" border="0" />
                </span>
    <span id="element1" class="elementClass">Alcohol</span>
    <span id="element2" class="elementClass">10.25</span>
    </span>
    <span class="mainspan2">
                <span class="logoImageSpan">
                    <img src="https://image.ibb.co/cPWGs6/sulphurdioxide.png" alt="sulphurdioxide" border="0" />
                </span>
    <span id="element1" class="elementClass">Total sulfur dioxide</span>
    <span id="element2" class="elementClass">98.5</span>
    </span>
    <span class="mainspan3">
                <img src="https://image.ibb.co/bT70Km/next.png" alt="next" border="0" />
            </span>
  </div>
</div>