如何在引导程序中正确居中步骤？

Question

正如您所看到的，图像中的步骤不能很好地居中。可能有人有一些建议如何正确地集中它？

CSS：

.stepwizard-step p {
    margin-top: 10px;    
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;     
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {    
    display: table-cell;
    text-align: center;
    position: relative;
    /*width: 70px*/
}

HTML：

<div class="stepwizard">
    <div class="stepwizard-row">
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default">1</button>
            <p>Uploading</p>
        </div>
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default">2</button>
            <p>Parsing</p>
        </div>  
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default">3</button>
            <p>Downloading</p>
        </div>  
        <div class="stepwizard-step">
            <button type="button" class="btn btn-default">4</button>
            <p>Showing</p>
        </div>                                  
    </div>
</div>

FIDDLE

Answer 1

我假设你在谈论不同尺寸的台阶之间的水平距离。这是由于该步骤的文本，例如， 上传，成为表格单元格的一部分。表格的宽度根据其内容的宽度分配给表格单元格，因此具有更多文本的单元格将比文本较少的单元格宽。

解决此问题的最简单方法可能是通过提供position: absolute，width: 100%和text-align: center来获取文档流程之外的步骤文本。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
 .stepwizard-step p {
  margin-top: 10px;
}
.stepwizard-row {
  display: table-row;
}
.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}
.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-order: 0;
}
.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
  /*width: 70px*/
}

.stepwizard-step p {
  position: absolute;
  width: 100%;
  text-align: center;
}
  

<div class="stepwizard">
  <div class="stepwizard-row">
    <div class="stepwizard-step">
      <button type="button" class="btn btn-default">1</button>
      <p>Uploading</p>
    </div>
    <div class="stepwizard-step">
      <button type="button" class="btn btn-default">2</button>
      <p>Parsing</p>
    </div>
    <div class="stepwizard-step">
      <button type="button" class="btn btn-default">3</button>
      <p>Downloading</p>
    </div>
    <div class="stepwizard-step">
      <button type="button" class="btn btn-default">4</button>
      <p>Showing</p>
    </div>
  </div>
</div>

Answer 2

通过这段代码可以解决这个问题

HTML

<div class="stepwizard">
                                <div class="stepwizard-row row">
                                    <div class="stepwizard-step col-md-3">
                                        <button type="button" class="btn btn-default">1</button>
                                        <p>Uploading</p>
                                    </div>
                                    <div class="stepwizard-step col-md-3">
                                        <button type="button" class="btn btn-default">2</button>
                                        <p>Parsing</p>
                                    </div>  
                                    <div class="stepwizard-step col-md-3">
                                        <button type="button" class="btn btn-default">3</button>
                                        <p>Downloading</p>
                                    </div>  
                                    <div class="stepwizard-step col-md-3">
                                        <button type="button" class="btn btn-default">4</button>
                                        <p>Showing</p>
                                    </div>                                  
                                </div>
                            </div>

css代码

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');



.stepwizard-step p {
    margin-top: 10px;    
}



.stepwizard { 
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {    
    text-align: center;
    position: relative;
    /*width: 70px*/
}

jsfiddle

Answer 3

仅更改stepwizard-row：在top 14px到18px之前，它是垂直居中的。