Question

我正在为我的目标网页设置步骤1,2,3。在这种情况下我使用bootstrap框架。

我想要的只是将步骤1和步骤3的文本向下移动一点，但是正常地将步骤2保留。

＆＃13;

$multival = New-Object System.Collections.Specialized.StringCollection
$multival.Add("[Hoofdspecialisme].[Specialisme Oms].&[$s]")
[snip]
$params = AddParameter -params $params -name "HoofdspecialismeSpecialismeOms" -val $multival

＆＃13;

.steps:.step:first-child:last-child h5 {
  margin-top: 25px;
}
.step {
  padding-left: 130px;
  padding-top: 12px;
  padding-bottom: 25px;
  background-color: black;
  height: 110px;
  border: 2px solid #62a9af;
  border-radius: 60px 0px;
}
.step .number {
  position: absolute;
  top: 14px;
  left: 25px;
  font-family: "Oswald", sans-serif;
  color: #ffbe01;
  font-size: 4em;
  line-height: 1.4em;
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(98, 169, 175, 0.25);
  border-radius: 50%;
}
.step h5 {
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
}
.steps {
  margin-top: 10px;
}

＆＃13;

我的Codepen

Answer 1

我认为这不是解决您遇到的问题的最佳方法，我认为您应该使用flexbox，它的响应速度要快得多。这是我的代码。

＆＃13;

* {
  font-family: Oswald, sans-serif;
}
.step {
  background-color: #000;
  height: 110px;
  border: 2px solid #62a9af;
  border-radius: 60px 0;
  display: flex;
  align-items: center;
}
.step .number {
  color: #ffbe01;
  font-size: 4em;
  line-height: 1.4em;
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(98, 169, 175, .25);
  border-radius: 50%;
  margin: 15px;
}
.step h5 {
  font-size: 2em;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">1</div>
              <h5>REGÍSTRATE</h5>
              <p></p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">2</div>
              <h5>SIGUE LAS INSTRUCCIONES</h5>
              <p></p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
            <div class="step">
              <div class="number">3</div>
              <h5>¡JUEGA!</h5>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

我已经简化了您的CSS，并且还更改了您的号码添加方式。您会注意到display: flex;和align-items: center;现在位于.step，这意味着.step内的所有内容都是垂直居中的。

现在每个步骤中的文字看起来都是中心的，无论它们占用了多少行。

我希望这会有所帮助。

Answer 2

只需添加两个步骤的ID：

HTML：

<h5 id="heightdown">REGÍSTRATE</h5>
<h5 id="heightdown">¡JUEGA!</h5>

CSS：

#heightdown {
     padding-top: 5px;
}

在这种情况下如何使用CSS选择器选择H5的子代码？

2 个答案: