中心<a> tag vertically to <img/>

Question

How can I center an a tag vertically to an img tag? I'm creating a top-bar. In the left and right sections of the top-bar, it has an image to the left, following by some text right after it in an a tag.

How can I center the anchor tag's text to the images?

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>