在构建测试站点的顶部时苦苦挣扎

时间:2015-04-14 10:18:17

标签: html twitter-bootstrap-3

编码非常新,我真的很难集中我的横幅,并使用bootstrap将facebook和twitter的两个徽标挂在居中图像的右侧。我已经把图像放在了什么样的东西之后,并且真的不想用填充来做它。

http://i.stack.imgur.com/agC3r.jpg

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">     </script>

 <title>Shrewsbury admag</title>
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">

<style>
a {
text-decoration: none;
}
.banner {
width : 300px;
height : 100px;
}
.facebook_logo {
width : 45px;
height : 45px;
}
.twitter_logo {
width : 45px;
height : 45px;
}
.top_area{
float :left;
}
</style>
</head>
<body>

        <div class='row text-center'>

        <img class="banner" src="logo.jpg" alt="Shrewsbury admag">


            <a href="https://www.facebook.com/pages/Shrewsbury-Admag/451886594847965">
                <img class="facebook_logo" src="facebook.jpeg" alt="Find us on facebook">
            </a>

            <a href="https://twitter.com/shrewsburyadmag">
                <img class="twitter_logo" src="Twitterlogo.png" alt="Follow us on twitter" align="bottom">
            </a>

    </div>

</body>

忽略我可怕的间距

1 个答案:

答案 0 :(得分:1)

如果您想将Facebook / Twitter图标放在一列中,我建议将这两个图标(链接)放在div中(让我们给它上课{{1} })并应用以下css:

social-holder