CODEWITHSUNDEEP
css
Dave
Dave

Reputation: 303

CSS text side by side same height

I am trying to make this text

enter image description here

but how can I make it same height and make inline each other

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

Upvotes: 1

Views: 71

Answers (3)

Mohamed Ramrami
Mohamed Ramrami

Reputation: 12701

Using display flex

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

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution

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

Solution using flex & inline-flex

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Try this:

p, h3{
  display: inline-block;
}

h3 {
  color: skyblue;
  font-size: 70px;
}
<div class="row">
  <div class="col-xs-12 text-center">
    <p>初期費用 <br> 月額費用 <br>手続き料</p>
    <h3>0<span>円</span></h3>
  </div>
</div>

Upvotes: 2

Related Questions