html - 链接未按预期在框内对齐

Question

我正在建立一个网站，现在我正要完成主页。现在，页脚中有一些链接以及一些彼此相邻的图像，就像联系我们栏一样。但是即使尝试了所有方法，链接似乎也与图像不一致。它们似乎比段落或跨度低一点。我尝试将同一行上的跨度转换为链接，但现在它们都挂得很低。

HTML:

<div id="brdr_btm">
    <div id="contactOptionContainer">
        <div class="ctcObject">
            <img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
                <div id="ctcLinks">
                        <a href="http://bit.ly/1KBJEak" target="_blank">La Martiniere College, Lucknow</a>
                </div>
        </div>

        <div class="ctcObject">
            <img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
                <div id="ctcLinks">
                    <a href="mailto:secretariat@lmun.org?Subject=LMUN%202015" target="_blank">secretariat@lmun.org</a>
                </div>
        </div>

        <div class="ctcObject">
            <img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
                <!--<div id="phoneno">-->
                <div id="ctcLinks">
                    <a href="#"> +91 9670680417 (Sec. Gen), </a>    <!-- was span -->
                    <a href="#"> +91 9415444444 (Dep. Sec. Gen)</a> <!-- was span -->
                </div>
        </div>

        <div class="ctcObject">
            <img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
        </div>

    </div>
</div>

CSS:

#brdr_btm
{
    display:flex;
    position:relative;
    height: 25px;
    width: 100%;
    background-color: #70A5DA;
    top:100%;
    vertical-align:bottom;
    margin_top:10px;
    clear:both;
    box-sizing:content-box;
    /*z-index:-1;*/
}

#contactUs
{
    margin:auto;
}

#contactOptionContainer
{
    position:relative;
    display:inline-block;
    margin-top:auto;
    margin-bottom:auto;
    /*  text-align:center;*/
    box-sizing:content-box;
    width:auto;
}

.ctcObject
{
    display:inline-block;
    margin-left:auto;
    margin-right:5em;
    /*  margin-bottom:6px;*/
    /*  margin-top:auto;*/
}

.ic_contact
{
    position:relative;
    margin-top:6.25px;
    margin-bottom:6.25px;
    height: 12.5px;
    width: 12.5px;
    -webkit-user-drag:none;
    user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-drag:none;
    /*  z-index:-1;*/
}

#ic_call
{
    margin-top: -2px;
    height:10.5px;
    width:10.5px;
}

#ctcLinks
{
    position:relative;
    display:inline-block; 
}

#ctcLinks a
{
    position:relative;
    margin-top:-6px;
    margin-bottom:0px;
    /*  display:inline-block;*/
    font-size:0.8em;
    color:#FFFFFF;
    /*  text-align:center;*/
}


#phoneno
{
    position:relative;
    display:inline-block;
    text-align:center;
}

#phoneno span
{
    margin-left:0;
    margin-right:0;
    margin-bottom:6px;
    margin-top: -1px;
    text-align:center; 
    display:inline-block;
    color:#ffffff;
    vertical-align:middle;
    font-size:0.9em;
}

如何防止这种情况发生以及导致这种情况的原因是什么？

问题的解决方案是什么？

这是我的 JSFiddle:http://jsfiddle.net/mfxefccz/

Answer 1

你应该添加到.ic_contact 和#ctcLinks 这个样式

display: inline-block;
height: 100%;
vertical-align: middle;

#brdr_btm
{

display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}

#contactUs
{
    margin:auto;
}

#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/*  text-align:center;*/
box-sizing:content-box;
width:auto;
}

.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/*  margin-bottom:6px;*/
/*  margin-top:auto;*/
}

.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/*  z-index:-1;*/
}

#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}

#ctcLinks
{
position:relative;
   display: inline-block;
    height: 100%;
    vertical-align: middle;
display:inline-block; 
}

#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/*  display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/*  text-align:center;*/
}


#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}

#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center; 
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}

<div id="brdr_btm">
    <div id="contactOptionContainer">

        <div class="ctcObject">
            <img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
                <div id="ctcLinks">
                        <a href="http://bit.ly/1KBJEak" target="_blank">La Martiniere College, Lucknow</a>
                </div>
        </div>

        <div class="ctcObject">
            <img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
                <div id="ctcLinks">
                    <a href="mailto:secretariat@lmun.org?Subject=LMUN%202015" target="_blank">secretariat@lmun.org</a>
                </div>
        </div>

        <div class="ctcObject">
            <img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
                <!--<div id="phoneno">-->
                <div id="ctcLinks">
                    <a href="#"> +91 9670680417 (Sec. Gen), </a>    <!-- was span -->
                    <a href="#"> +91 9415444444 (Dep. Sec. Gen)</a> <!-- was span -->
                </div>
        </div>

        <div class="ctcObject">
            <img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
        </div>

    </div>
</div>

Here一个演示。

因此，将其显示为 inline-block，因为 display: inline-block; 不适用于 block 。然后给 height: 100%。在这种情况下，in 意味着 100% 来自 parent 。所以我们总是在垂直中心有一个图像或 block 。