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>元素内的垂直中心图像

3 个答案: