Search code examples
htmlcssalignmentvertical-alignment

Difficulty aligning h1 and h2 with CSS

I'm having difficulty vertically aligning the 'h1' red notification bubble with the 'h2' tag next to it. Was I on the right track trying to use display: inline-block; or completely off. I also tried using vertical-align:middlebut that didn't seem to work. Any help would be greatly appreciated, thanks.

body {
  font-family: sans-serif;
}
.steps h2 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  display: inline-block;
}
h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 100;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps {
  width: 100%;
  height: 405px;
  position: absolute;
  top: 9%;
  left: 0px;
  right: 0px;
  margin: 0px auto;
}
label {
  background: #F2F2F2;
  height: 69px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #2C3E50;
  color: #fff;
  text-transform: capitalize;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1px;
  position: relative;
  padding: 5px 5px 5px 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
label h2 span {
  display: block;
  font-size: 12px;
  text-transform: capitalize;
  font-weight: normal;
  color: #bdc3c7;
  padding-top: 5px;
}
.new {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  background: #FF4447;
}
<div class="steps">
  <h2>Your Matches</h2>
  <ul id="matches">
    <li>
      <h1 class="new">1!</h1>
      <label for="label-1">

        <h2>Steve, 28 <span>Matched 2 days ago</span></h2>
      </label>
    </li>
    <li>
      <label for="label-2">
        <h2>Tony, 30 <span>Matched 1 hour ago</span></h2> 
      </label>
    </li>

    <li>
      <label for="label-3">
        <h2>Bruce<span>Matched 4 days ago</span></h2> 
      </label>
    </li>
  </ul>
</div>

Solution

  • Like so? Is this what you mean?

    If so, you're thinking along the right lines. Another alternative to previously mentioned solutions is to just move the h1 inside the label where the h1 (basically the contents of the label) you want it next to is, inside the actual label element, as a child. You also need to change your label h2 span to display: inline;.

    (HTML)

    <li>
  <label for="label-1">
    <h1 class="new">1!</h1>
    <h2>Steve, 28 <span>Matched 2 days ago</span></h2>
  </label>
</li>

    (CSS)

    label h2 span {
  display: inline;
  font-size: 12px;
  text-transform: capitalize;
  font-weight: normal;
  color: #bdc3c7;
  padding-top: 5px;
}
.new {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  background: #FF4447;
}