如何在同一行显示它们

Question

我试图在同一行显示h4和段落，但它不起作用。我试图将它们漂浮到左侧，但没有任何改变

＆＃13;

＆＃13;

.offer {
  margin-left: 12%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}

＆＃13;

<div class="offer">
  <div class="row">
    <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  </div>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修复您的HTML并使用flex：

.offer {
display:flex;
  align-items:center;
  margin:0 5%;
}

.offer h4 {
  background-color: #f25c25;
  flex:0 0 auto;
  display: inline-flex;
  justify-content:center;
  align-items:center;
  height: 120px;
  width: 120px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
  margin-right:20px
}

<div class="offer">
  <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

Answer 2

同时设置.row和.paragraph内联块，将宽度设置和vertical-align: middle应用于两者：

.offer {
  margin-left: 8%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}
.row {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
}
.paragraph {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div class="offer">
  <div class="row">
    <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  </div>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

Answer 3

在您的情况下，您只需将p标记移至同一div，并将p标记设置为display: table-cell。

＆＃13;

＆＃13;

.offer {
  margin-left: 12%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}

.offer p {
  display: table-cell;
}

＆＃13;

<div class="offer">
  <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

＆＃13;

＆＃13;

＆＃13;