html - DIV 不应用对齐

Question

我不确定是什么导致了我的 DIV 对齐问题。我试图让两个 2 列 DIV 在中间对齐，但每个容器 DIV 似乎都没有应用对齐属性。似乎每个 DIV 容器都只向左对齐。

.twoColumnV2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-width: auto;
  -moz-column-width: auto;
  column-width: auto;
}
.twoColumn {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -webkit-column-gap: 20px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;
  /* Firefox */
  column-gap: 20px;
  -webkit-column-width: 50%;
  /* Chrome, Safari, Opera */
  -moz-column-width: 50%;
  /* Firefox */
  column-width: 50%;
}
.inlineBlock {
  display: inline-block;
  cursor: pointer;
}

<div style="text-align:center">
  <h1 class="inlineBlock" style="margin-top:-5px">Test Format</h1>
</div>
<div class="twoColumn">
  <div style="text-align: right">
    <!-- DIV container 01 -->
    <div class="twoColumnV2 inlineBlock">
      <div style="text-align: right" class="fieldName inlineBlock">Commodity:</div>
      <div style="text-align: left" class="inlineBlock">
        <select name="fkTest">
          <option value="">Please select</option>
          <option value="1">Avocados</option>
          <option value="2">Beans</option>
          <option value="3">Berries</option>
          <option value="4">Broccoli</option>
        </select>
      </div>
    </div>
  </div>
  <div style="text-align: left">
    <!-- DIV container 02 -->
    <div class="twoColumnV2 inlineBlock">
      <div style="text-align:right" class="fieldName inlineBlock">Variety:</div>
      <div style="text-align:left" class="inlineBlock">
        <select name="fkLocTest" id="fkLocTest">
          <option value="">Please select</option>
          <option value="12">Beefsteak</option>
          <option value="11">Cherry</option>
          <option value="13">Cherry on the Vine Organic</option>
          <option value="14">Cluster</option>
          <option value="10">Grape</option>
          <option value="9">Roma</option>
        </select>
      </div>
    </div>
  </div>
</div>

jsfiddle example

Answer 1

为 div 尝试这个:twoColumn

margin-left: 20%;
margin-right: 20%;