CSS文本并排相同的高度

Question

我正在尝试制作此文

但我怎样才能使它高度相同并相互内联

<div class="row">
    <div class="col-xs-12 text-center">
        <p style="display:inline">初期費用 <br> 月額費用 <br>手続き料</p>
        <h3 style="display:inline">0<span>円</span></h3>
    </div>
</div>

Answer 1

试试这个：

＆＃13;

＆＃13;

p, h3{
  display: inline-block;
}

h3 {
  color: skyblue;
  font-size: 70px;
}

＆＃13;

<div class="row">
  <div class="col-xs-12 text-center">
    <p>初期費用 <br> 月額費用 <br>手続き料</p>
    <h3>0<span>円</span></h3>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用解决方案

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-12 text-center">       
      <div style="display: flex;">
        <p style="display: inline-flex">初期費用 <br> 月額費用 <br>手続き料</p>
        <h3 style="display: inline-flex">0<span>円</span></h3>
      </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用flex＆amp; amp;直列柔性

Answer 3

使用display flex

＆＃13;

＆＃13;

.col-xs-12 {
  display: flex;
  align-items: center;
  padding: 0;
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin-right: 8px;
}

h3 {
  font-size: 102px;
  margin: 0;
}

h3 span {
  font-size: 32px
}

＆＃13;

<div class="row">
    <div class="col-xs-12 text-center container">
        <p>初期費用 <br> 月額費用 <br>手続き料</p>
        <h3>0<span>円</span></h3>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;