How to put two text elements side by side with CSS? [duplicate]-CodePudding

This question already has answers here:

I want the "Stage 1" to be a little more on top - aligning to the center of the "1" span

Any suggestions that will help me to achieve this? I was trying to use some padding but it seems like it's not working properly with display:inline

CodePudding user response：

Try with flex:

.stage .stageInfo span{
  font-size: 48px;
  font-weight: 600;
  color:  #f8f9fa;
  margin-left: 25px;
}

.stage .stageInfo  p {
  margin-left: 25px;
  color:  #f8f9fa;
}

.stage .stageInfo {
  display: flex;
  align-items: center;
}
.stage {
  background: #343940;
}

<div class="stage">
<div class="stageInfo">
  <span>1</span>
  <p>Stage 1</p>
</div>
</div>

CodePudding user response：

You can make it with flex and use align-items:center. one possibility of many ways...

CodePudding user response：

.stageInfo span {
  font-size: 48px;
  font-weight: 600;
  margin-left: 25px;
}

.stageInfo p {
  margin-left: 25px;
  padding-top: 20px;
}

.stageInfo {
  display: flex;
  align-items: center;
}

<div class="stageInfo">
  <span>1</span>
  <p>Stage 1</p>
</div>

Page link：https//www.codepudding.com/Softwaredesign/126677.html

Prev:Allign Textboxes with label inside form & table

Next:How to retrieve a Javascript value that doesn't have a subclass