테스트 사이트 - 개발 중인 베타 버전입니다

button 안의 span 위치 조정 채택완료

버튼을 만들고 있습니다만 보다싶이 시작이라는 글자가 아래로 내려가있습니다

img 옆, 버튼 가운데 줄 쯤에 시작 글씨를 두고 싶은데 무엇을 해야할까요??

 

이건 저 부분의 html입니다

<strong> </strong></p>

<p><!--html--></p>

<p>    <div id="toolbar"></p>

<p>        <div class="toolbar-start-menu"></p>

<p>            <button type="button"></p>

<p>                <div id="start-button"></p>

<p>                    <img src="../img/windows-0.png"></p>

<p>                    <span>시작</span></p>

<p> </p>

<p>                </div></p>

<p> </p>

<p>            </button></p>

<p>        </div></p>

<p>    </div></p>

<p>

 

그리고 이건 저 부분의 css 입니다

<strong> </strong></p>

<p><span style="font-size: 0.875em;">    .toolbar-start-menu {</span></p>

<p>        /*시작메뉴*/</p>

<p>        float: left;</p>

<p> </p>

<p>        display: flex;</p>

<p>        justify-content: space-around;</p>

<p>        align-items: center;</p>

<p>



 </p>

<p>    }</p>

<p> </p>

<p>    span {</p>

<p> </p>

<p>        font-weight: bold;</p>

<p>        padding-top: 0;</p>

<p>        font-size: 14px;</p>

<p>    }</p>

<p> </p>

<p>    button {</p>

<p> </p>

<p>        user-select: none;</p>

<p>

 </p>

<p>        display: flex;</p>

<p>        align-items: baseline;</p>

<p>        line-height: 2px;</p>

<p>

 </p>

<p>        padding-right: 5px;</p>

<p>        height: 29px;</p>

<p>        margin: 2px 3px;</p>

<p>    }</p>

<p>
 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

 </p>

<p><style></p>

<p>#start-button{display: flex;align-items: center}</p>

<p></style></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

도움 주셔서 정말 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

1. vertical-align: middle;

</p>

<p>    #start-button img {

        vertical-align: middle;

    }</p>

<p>

 

2. display: flex;

</p>

<p>    #start-button {

        display: flex;

        align-items: center;

        gap: 0.4em;

    }</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

도움 주셔서 정말 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

전체 질문 목록