How to use CSS selectors select child of H5 in this case?

Question

I am styling steps 1,2,3 for my landing page. I use the bootstrap framework in this case.

What I want is just move text for step 1 and step 3 down a little bit but leave step 2 as normal.

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

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

My Codepen

It's worth stating that the `h5` **do not have any children** in your code. — Paulie_D, Oct 18 '16 at 11:21
Also, **this** is what you are really asking - http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css?noredirect=1&lq=1 — Paulie_D, Oct 18 '16 at 11:23

score 0 · Answer 1 · answered Oct 18 '16 at 11:39

I don't think that's the best way to solve the problem you're facing, I think you should use flexbox, it's a lot more responsive. Here's my code.

* {
  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;
}

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

I've simplified your CSS a little, and also changed how your number is added. You'll notice display: flex; and align-items: center; are now in .step this means everything inside .step is vertically central.

Now the text in each step will look central no matter how many lines they take up.

I hope this helps.

I am actually after making all text to be in center vertical line. — nathiboat, Oct 18 '16 at 12:04
I finally find the best answer http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css?noredirect=1&lq=1 — nathiboat, Oct 18 '16 at 12:04

score -3 · Answer 2 · answered Oct 18 '16 at 11:16

-3

Just add an id for the 2 steps:

HTML:

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

CSS:

#heightdown {
     padding-top: 5px;
}

answered Oct 18 '16 at 11:16

Jordan Zapf

65
1
11

How to use CSS selectors select child of H5 in this case?

2 Answers2