center allign text on right of div

Question

I Have Div with a div and a p tag within it. I need the inner div (customImage) to be on the left while the text is next to it but centered.

here is the HTML

<div class="custom_hdr">
    <div class="customImage">
    </div>
    <p>WITH PAD</p>
</div>

Please show your effort of what you have tried so for. – carl johnson Sep 26 '20 at 15:32 — carl johnson, Sep 26 '20 at 15:32

score 1 · Accepted Answer · edited Sep 26 '20 at 15:47

You can _use flex and align-items: center; to achieve it.

.custom_hdr {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    background-color: aliceblue;
    max-width: 250px;
    justify-content: space-between;
    padding: 10px;
}
.customImage {
    width: 100px;
    background-color: #dedeb9;
    height: 100px;
}

img.user_pro {
    width: 100%;
}

<div class="custom_hdr">
            <div class="customImage">
                <img src="https://graph.facebook.com/10212529711337983/picture?type=large" alt="" class="user_pro">
            </div>
            <p>WITH PAD</p>
        </div>

score -1 · Answer 2 · answered Sep 26 '20 at 15:34

-1

Add display:flex in your custom_hdr class

answered Sep 26 '20 at 15:34

paulhenry

111
5

center allign text on right of div

2 Answers2