链接未按照预期在框内对齐

时间：2015-08-12 12:12:59

标签： html css

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

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/

2 个答案:

答案 0 :(得分：1)

您应该添加.ic_contact和#ctcLinks这种风格

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

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

Here演示。

因此，将其显示为inline-block，因为display: inline-block;不使用块。然后给出一个height: 100%。在这种情况下，100％来自父母。所以我们总是在垂直中心有一个图像或块。

答案 1 :(得分：0)

您已为.ic_contact设置了边距。如果删除.ic_contact的margin-bottom，您的图像和链接将正确对齐。见here 

.ic_contact
{
position:relative;
margin-top:6.25px;
height: 12.5px;
width: 12.5px;
}
相关问题
最新问题