CODEWITHSUNDEEP
htmlcss
coolcodingguy123
coolcodingguy123

Reputation: 3

CSS Arrow not aligned vertically with text

I'm having troubling aligning a css arrow with text on the same line. The text always seems to float a little above the arrow vertically. I thought align items center in the parent div would align the items vertically but it looks off to me.

        <div className={styles.accordian_wrapper}>
            <div id="1"className={styles.row1} onClick={showContent}>
                <div>
                    <div className={styles.arrow}></div>
                    <span>RETRACTED INFO</span>
                </div>
                <div className={styles.box}></div>
           </div>
       </div>

.accordian_wrapper{
    display: flex;
    width: auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e3e3e3e3;
    flex-direction: column;
}
.accordian_wrapper > div{
    display: flex;
    align-items: center;
    height: 40px;
    width: 50vw;
    padding: 0 10px;
    border-bottom: 1px solid black;
    justify-content: space-between;
    margin: 0 10px;
    box-sizing: border-box;
}
.arrow{
    transform: translateY(50%);
    border: solid rgb(37, 36, 36);
    border-width: 0 1px 1px 0;
    display: inline-block;
    vertical-align:middle;
    padding: 3px;
    transform: rotate(-45deg);
    margin-right: 10px;
    -webkit-transform: rotate(-45deg);
}

Upvotes: 0

Views: 587

Answers (1)

Egon Adelsberger
Egon Adelsberger

Reputation: 85

One solution is to add display:flex; align-items:center; to parent div; lets say we add it a class named wrapper.

<div class="wrapper">
    <div class="arrow"></div>
    <span>RETRACTED INFO</span>
</div>


.accordian_wrapper{
    display: flex;
    width: auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e3e3e3e3;
    flex-direction: column;
    }
    .accordian_wrapper > div{
    display: flex;
    align-items: center;
    height: 40px;
    width: 50vw;
    padding: 0 10px;
    border-bottom: 1px solid black;
    justify-content: space-between;
    margin: 0 10px;
    box-sizing: border-box;
    }
    
    .wrapper{
      display:flex;
      align-items:center;
    }
    .arrow{
    transform: translateY(50%);
    border: solid rgb(37, 36, 36);
    border-width: 0 1px 1px 0;
    display: inline-block;
    vertical-align:middle;
    padding: 3px;
    transform: rotate(-45deg);
    margin-right: 10px;
    -webkit-transform: rotate(-45deg);
    }
<div class="accordian_wrapper">
    <div id="1"class="row1" >
        <div class="wrapper">
            <div class="arrow"></div>
            <span>RETRACTED INFO</span>
        </div>
        <div class="box"></div>
   </div>
</div>

Upvotes: 1

Related Questions