在 <a> 元素内垂直居中图像

Question

我知道这个问题被问过很多次了，但是不管我怎么试都不行

这是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>

这是 css（请注意，我删除了使图像居中的尝试，因为没有任何效果）；

.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

Answer 1

您可以使用 flexbox 来做到这一点。只需将此添加到您的代码中：

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

工作示例：https://jsfiddle.net/ajobi/ajcezv67/4/

Answer 2

试试这个

.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>

Answer 3

试试这个：

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

在 <a> 元素内垂直居中图像

Verticaly center image inside <a> element

html

css

vertical-alignment