Verticaly center image inside element

Question

I know that this question was asked many many times, but no matter what I try it doesn't work

Here is a part of the html;

<div class="bookmark-container">
    <div class="bookmark-set">
        <div class="bookmark-title">Daily</div>
        <div class="bookmark-inner-container">
            <a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
        </div>
    </div>

And this is the css (note that I removed my attemps at centering the images because nothing worked);

.bookmark-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    margin: 1em 0em;
}

.bookmark-set{
    padding: 1em;
    background-color: #322441;
    font-family: "Roboto";
    font-size: .85em;
    width: 25%;
    height: auto;
    margin: 0em .5em;
}

.bookmark-inner-container {
    height: 80%;
    vertical-align: top;
}

.bookmark-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0em 0em .35em 0em;
}

.bookmark {
    color: #fff;
    display: block;
    margin: .5em 0em;
}

img {
    max-height: .9rem;
    margin-right: 6px;
}

Here are the files

Try this: for image img { vertical-align: text-top;} – Priyanka Nov 12 '19 at 11:13 — Priyanka, Nov 12 '19 at 11:13

score 1 · Accepted Answer · answered Nov 12 '19 at 11:12

1

You could use flexbox to do that. Just add this to your code:

.bookmark {
    display: flex;
    align-items: center;
}

Working example: https://jsfiddle.net/ajobi/ajcezv67/4/

answered Nov 12 '19 at 11:12

ajobi

2,996
3
13
28

Haha, then I would say, you could use that time to have a quick look at what all can you achieve with the `flexbox`. I would recommend you this article, it's pretty interesting and well written too: https://internetingishard.com/html-and-css/flexbox/ – ajobi Nov 12 '19 at 11:23

score 0 · Answer 2 · answered Nov 12 '19 at 11:15

Try this

.bookmark-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    margin: 1em 0em;
}

.bookmark-set{
    padding: 1em;
    background-color: #322441;
    font-family: "Roboto";
    font-size: .85em;
    width: 25%;
    height: auto;
    margin: 0em .5em;
}

.bookmark-inner-container {
    height: 80%;
    vertical-align: top;
}

.bookmark-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0em 0em .35em 0em;
}

.bookmark {
    color: #fff;
    display: flex;
    align-items: center;
    margin: .5em 0em;
}
.bookmark img{
  padding-right: 10px;
}

<div class="bookmark-container">
    <div class="bookmark-set">
        <div class="bookmark-title">Daily</div>
        <div class="bookmark-inner-container">
            <a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
        </div>
    </div>

score 0 · Answer 3 · answered Nov 12 '19 at 11:16

0

Try this:

img {
    max-height: .9rem;
    margin-right: 6px;
    vertical-align: text-top;
}

answered Nov 12 '19 at 11:16

Priyanka

287
1
11

Verticaly center image inside element

3 Answers3