instafeed.js返回的中心图像

时间:2015-03-17 12:46:12

标签: javascript html css instafeedjs

我正在使用Instafeed.js 制作一个Instagram livefeed。一切都很好,但我想把instafeed返回的图像居中。我试图使用很多不同的方法,但它似乎没有按预期运行。

我的HTML代码:



<!DOCTYPE html>
<head>
<title>Scenekvelder</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="/instafeed.js"></script>
<script type="text/javascript">

var feed = new Instafeed({
get: "tagged",
tagName: "de3musketereroslo",
clientId: "d07f4ce08c6d4251b9fbb813d1fae305",
resolution: "standard_resolution",
limit: 1,
sortBy: "most-recent"
});

feed.run();

setInterval(function () {location.reload()}, 10000);


</script>
</head>

<body>
<h1>Livefeed fra instagram #De3MusketererOslo</h1>
<main>
<div id="wrapper" class="center">
<div id="insta-wrap">
<div id="instafeed"></div>
</div>
</div>
</main>
</body>
</html>			
&#13;
&#13;
&#13;

CSS:

&#13;
&#13;
body {
background: #000000;
}

h1 {
color: #FFFFFF;
text-align: center;
padding-top: 2cm;
}

.center {
align-items: center;
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

根据w3schools,“align-items”仅适用于灵活元素,我假设您发布的所有css都是实际的CSS。因此,这样做

.center {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

根据布局其余部分的工作方式,以及Instagram Feed是否只为您提供img-tags,您可能只想这样做:

.center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}