텍스트 중앙을 맞추려면 어떻게 해야할까요..?
본문
<ul>
<li>
<h4>미세먼지(pm10)</h4>
<p class="Bg"><b>27㎍/㎥</b> <span>매우<br/>나쁨</span></p>
</li>
<li>
<h4>미세먼지(pm10)</h4>
<p class="Bg"><b>27㎍/㎥</b> <span>나쁨</span></p>
</li>
</ul>
.shapeWrap li p{height:50px; border-radius:25px; margin: 0 auto; font-weight: initial; line-height: initial; letter-spacing: initial; color: #fff;}
.shapeWrap li p b{font-size: 2rem; display: inline-block; line-height:50px;}
.shapeWrap li p span{font-size: 1rem; display: inline-block;}
현재 이렇게 되어있는 상황인데요.
line-height를 쓰면 위에 두줄이 어그러지고
position 주고 translate 주면 아래쪽 한줄짜리 나쁨이 영역을 벗어납니다ㅠ
노란박스의 중간 수평을 맞추려면 어떻게 해야할까요?
답변 3
<style>
.shapeWrap li p{height:50px; border-radius:25px; margin: 0 auto; font-weight: initial; line-height: initial; letter-spacing: initial; color: #fff;}
.shapeWrap li p b{font-size: 2rem; display: inline-block; line-height:50px;}
.shapeWrap li p span{font-size: 1rem; display: inline-block;}
.shapeWrap li p {
background-color: #facc16;
padding-right: 3rem;
display: flex;
justify-content: flex-end;
}
.Bg {
display: flex;
align-items: center;
}
</style>
<ul class="shapeWrap">
<li>
<h4>미세먼지(pm10)</h4>
<p class="Bg"><b>27㎍/㎥</b> <span>매우<br/>나쁨</span></p>
</li>
<li>
<h4>미세먼지(pm10)</h4>
<p class="Bg"><b>27㎍/㎥</b> <span>나쁨</span></p>
</li>
</ul>
답변을 작성하시기 전에 로그인 해주세요.