Vertically align div with another div

Question

These are inline-block divs that are dynamically added with varying lengths of text. I tried setting the same height for divs, setting the same line-height for the texts and also padded texts so their lengths are the same, but theses divs are still mis-aligned. Is there a css trick or JS hack for this? Thanks.

Scss:

.cards-container {
        border: 1px solid white;
        margin: auto;
        margin-top: 2em;
        width: 80%;
        .transition-wrapper {
            border: 1px solid yellow;
            display: inline-block;
            margin: 0.2em;
            width: $card-width + 10;
            height: $card-height + 10;
            .card-wrapper {
                position: relative;
                border: 1px solid grey;
                border-radius: 2px;
                width: $card-width;
                height: $card-height;
                margin: auto;
                top: 50%;
                transform: translateY(-$card-height / 2);
                .stock-card {
                    text-align: center;
                    border-left: 3px solid $hacker-green;
                    border-top-left-radius: 1px;
                    border-bottom-left-radius: 1px;
                    width: $card-width;
                    height: $card-height * .975;

                    transition: all 0.3s ease;
                    color: white;
                    &:hover {
                        border-left: 5px solid red;
                        border-top-left-radius: 1px;
                        border-bottom-left-radius: 2px;
                    }
                    .stock-symbol-wrapper {
                        border: 1px solid blue;
                        height: $card-height * .975 * (1/4);
                    }
                    .stock-name-wrapper {
                        border: 1px solid red;
                        height: $card-height * .975 * (3/4);
                    }
                }
                .stock-card > * {
                    vertical-align: middle;
                }
                .icon {
                    position: absolute;
                    top: 0;
                    right: 0;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }
        }
    }

Jsx

<div className='cards-container'>
                {stockInfo.map((si, i) => {
                    const sym = si[0];
                    const name = si[1];
                    return (<div className='transition-wrapper' onMouseEnter={(evt) => {registerCardSymbol(evt); toggleIcon()}}
                        onMouseLeave={(evt) => {deregisterCardSymbol(evt); toggleIconOff()}} id={sym} key={i} >
                        <Transition animation='fade up' duration={300} transitionOnMount={true}>
                            <div className='card-wrapper'>
                                <div className='stock-card' id={sym} >
                                    <div className='stock-symbol-wrapper'>{sym}</div>
                                    <div className='stock-name-wrapper'>{name}</div>
                                    {icon && (cardSymbol === sym) ? <Icon onClick={(evt) => {removeStock(evt); /*registerCardSymbol(evt); toggleIcon()*/}}
                                        id={sym} className='icon' color='grey' name='delete'></Icon> : ''}
                                </div>
                            </div>
                        </Transition>
                    </div>)
                })}
            </div>

Please read [ask] and [mcve]. You need to post your code – Gab Jan 25 '18 at 15:19 — Gab, Jan 25 '18 at 15:19
Can you provide your HTML/CSS? – Scath Jan 25 '18 at 15:19 — Scath, Jan 25 '18 at 15:19

score -1 · Accepted Answer · answered Jan 25 '18 at 15:19

-1

Use vertical-align: top to align inline-blocks along their top border (by default they are aligned along their baseline, which is the last line of text in there).

answered Jan 25 '18 at 15:19

Johannes

64,305
18
73
130

That worked; I've overlooked one place to add vertical-align: top --the inline-block divs themselves. Thank you. – Yungil Hong Jan 25 '18 at 15:28

Vertically align div with another div

1 Answers1