将<a>标记垂直放置到<img>

Question

如何使标记垂直于img标记的中心？我在创造一个顶级酒吧。在顶部栏的左和右部分，它的左边有一个图像，后面跟着a标记中的一些文本。

​

​

如何将锚标签的文本集中到图像中？

​

body {
    margin: 0;
}

.container {
    width: 980px;
    margin: 0 auto;
}

/***********/
/* Top Bar */
/***********/

.top-bar {
    background: #000;
    font-family: Arial;
    font-size: 14px;
    height: 18px;
    padding: 8px;
}

.top-bar .contact-icon {
    margin-right: 5px;
}

.top-bar .section {
    height: 18px;
    width: 33.33%;
}

.top-bar .email {
    background: blue;
    float: left;
}

.top-bar .social {
    background: red;
    float: left;
    text-align: center;
}

.top-bar .social-icon-middle {
    margin: 0 30px;
}

.top-bar .phone {
    background: orange;
    float: left;
    text-align: right;
}

.top-bar a {
    color: #E2E2E2;
    text-decoration: none;
}

<div class="top-bar">
    <div class="container">
        <div class="email section">
            <a href="mailto:to-do">
                <img class="contact-icon" src="mail.png" alt="mail" />
            email@to-do.com
        </a>
    </div>

    <div class="social section">
        <a href="to-do">
            <img src="facebook.png" alt="facebook" />
        </a>

        <a class="social-icon-middle" href="to-do">
            <img src="twitter.png" alt="twitter" />
        </a>

        <a href="to-do">
            <img src="instagram.png" alt="instagram" />
        </a>
    </div>

    <div class="phone section">
        <a href="tel:to-do">
            <img class="contact-icon" src="phone.png" alt="phone" />
            (012) 345-6789
        </a>
    </div>
</div>

​

Answer 1

由于您已经在将高度添加到顶部栏中，您可以更改文本的位置，并将其移动到您需要的位置，如果用span标记包装的话。然后，您可以通过您的css控制它的位置。

​

<style>

.container {
    width: 980px;
    margin: 0 auto;
}
.top-bar {
    background: #000;
    font-family: Arial;
    font-size: 14px;
    height: 18px;
    padding: 8px;
}

.top-bar .contact-icon {
    margin-right: 5px;
}

.top-bar .section {
    height: 18px;
    width: 33.33%;
}

.top-bar .email {
    background: blue;
    float: left;
}

.top-bar .social {
    background: red;
    float: left;
    text-align: center;
}

.top-bar .social-icon-middle {
    margin: 0 30px;
}

.top-bar .phone {
    background: orange;
    float: left;
    text-align: right;
}

.top-bar a {
    color: #E2E2E2;
    text-decoration: none;
}
.top-bar a span {
    display: inline-block;
    position: relative;
    top: -7px;
}
</style>

<div class="top-bar">
    <div class="container">
        <div class="email section">
            <a href="mailto:to-do">
                <img class="contact-icon" src="mail.png" alt="mail" />
            <span>email@to-do.com</span>
        </a>
    </div>

    <div class="social section">
        <a href="to-do">
            <img src="facebook.png" alt="facebook" />
        </a>

        <a class="social-icon-middle" href="to-do">
            <img src="twitter.png" alt="twitter" />
        </a>

        <a href="to-do">
            <img src="instagram.png" alt="instagram" />
        </a>
    </div>

    <div class="phone section">
        <a href="tel:to-do">
            <img class="contact-icon" src="phone.png" alt="phone" />
            <span>(012) 345-6789</span>
        </a>
    </div>
</div>

​

Answer 2

这只是在图像标记上设置vertical-align: middle，使其与文本的垂直中心对齐。

更具体地说，“将元素的中间与基线加上父元素的x高度的一半对齐”。(取自MDN)。

​

body {
  margin: 0;
}

.container {
  width: 980px;
  margin: 0 auto;
}

/***********/
/* Top Bar */
/***********/

.top-bar {
  background: #000;
  font-family: Arial;
  font-size: 14px;
  height: 18px;
  padding: 8px;
}

.top-bar .contact-icon {
  margin-right: 5px;
}

.top-bar .section {
  height: 18px;
  width: 33.33%;
}

.top-bar .email {
  background: blue;
  float: left;
}

.top-bar .social {
  background: red;
  float: left;
  text-align: center;
}

.top-bar .social-icon-middle {
  margin: 0 30px;
}

.top-bar .phone {
  background: orange;
  float: left;
  text-align: right;
}

.top-bar a {
  color: #E2E2E2;
  text-decoration: none;
}

.top-bar a img {
  vertical-align: middle;
}

<div class="top-bar">
    <div class="container">
        <div class="email section">
            <a href="mailto:to-do">
                <img class="contact-icon" src="https://www.google.ro/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="mail" height="20"/>
                email@to-do.com
            </a>
        </div>

        <div class="social section">
            <a href="to-do">
                <img src="facebook.png" alt="facebook" />
            </a>

            <a class="social-icon-middle" href="to-do">
                <img src="twitter.png" alt="twitter" />
            </a>

            <a href="to-do">
                <img src="instagram.png" alt="instagram" />
            </a>
        </div>

        <div class="phone section">
            <a href="tel:to-do">
                <img class="contact-icon" src="phone.png" alt="phone" />
                (012) 345-6789
            </a>
        </div>
    </div>
</div>

​