- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在元素中使用 Unslider ( http://unslider.com/ )。
我成功地将整个 slider 部分对准了目标的一半。但问题是1920 和更低宽度分辨率的幻灯片没有居中。图片的宽度为 3940 像素。
我尝试应用来自 this 的代码回答;像这样:
$(function () {
$('.banner').unslider();
AdjustSliderImgWrapper();
});
$(window).resize(AdjustSliderImgWrapper);
function AdjustSliderImgWrapper() {
var left = (parseInt($('.banner > li > img').width()) - $('.banner > li').innerWidth()) / -2;
$('.banner > li > img').css('left', left);
}
,但无济于事。我也试过:
$(".banner img").each(function () {
$(this).css("margin-left", -this.width / 2);
})
还有:
background-position: center center !important;
这是我的代码:
window.console && console.warn("This version of Unslider is due to be deprecated by December 1. Please visit unslider.com for details on how to upgrade."), function (t, s) {
if (!t)
return s;
var i = function () {
this.el = s,
this.items = s,
this.sizes = [],
this.max = [0, 0],
this.current = 0,
this.interval = s,
this.opts = {
speed : 500,
delay : 3e3,
complete : s,
keys : !s,
dots : s,
fluid : s
};
var i = this;
this.init = function (s, i) {
return this.el = s,
this.ul = s.children("ul"),
this.max = [s.outerWidth(), s.outerHeight()],
this.items = this.ul.children("li").each(this.calculate),
this.opts = t.extend(this.opts, i),
this.setup(),
this
},
this.calculate = function (s) {
var e = t(this),
n = e.outerWidth(),
h = e.outerHeight();
i.sizes[s] = [n, h],
n > i.max[0] && (i.max[0] = n),
h > i.max[1] && (i.max[1] = h)
},
this.setup = function () {
if (this.el.css({
overflow : "hidden",
width : i.max[0],
height : this.items.first().outerHeight()
}), this.ul.css({
width : 100 * this.items.length + "%",
position : "relative"
}), this.items.css("width", 100 / this.items.length + "%"), this.opts.delay !== s && (this.start(), this.el.hover(this.stop, this.start)), this.opts.keys && t(document).keydown(this.keys), this.opts.dots && this.dots(), this.opts.fluid) {
var e = function () {
i.el.css("width", Math.min(Math.round(i.el.outerWidth() / i.el.parent().outerWidth() * 100), 100) + "%")
};
e(),
t(window).resize(e)
}
this.opts.arrows && this.el.parent().append('<p class="arrows"><span class="prev">â†</span><span class="next">→</span></p>').find(".arrows span").click(function () {
t.isFunction(i[this.className]) && i[this.className]()
}),
t.event.swipe && this.el.on("swipeleft", i.prev).on("swiperight", i.next)
},
this.move = function (s, e) {
this.items.eq(s).length || (s = 0),
0 > s && (s = this.items.length - 1);
var n = this.items.eq(s),
h = {
height : n.outerHeight()
},
o = e ? 5 : this.opts.speed;
this.ul.is(":animated") || (i.el.find(".dot:eq(" + s + ")").addClass("active").siblings().removeClass("active"), this.el.animate(h, o) && this.ul.animate(t.extend({
left : "-" + s + "00%"
}, h), o, function () {
i.current = s,
t.isFunction(i.opts.complete) && !e && i.opts.complete(i.el)
}))
},
this.start = function () {
i.interval = setInterval(function () {
i.move(i.current + 1)
}, i.opts.delay)
},
this.stop = function () {
return i.interval = clearInterval(i.interval),
i
},
this.keys = function (s) {
var e = s.which,
n = {
37 : i.prev,
39 : i.next,
27 : i.stop
};
t.isFunction(n[e]) && n[e]()
},
this.next = function () {
return i.stop().move(i.current + 1)
},
this.prev = function () {
return i.stop().move(i.current - 1)
},
this.dots = function () {
var s = '<ol class="dots">';
t.each(this.items, function (t) {
s += '<li class="dot' + (1 > t ? " active" : "") + '">' + (t + 1) + "</li>"
}),
s += "</ol>",
this.el.addClass("has-dots").append(s).find(".dot").click(function () {
i.move(t(this).index())
})
}
};
t.fn.unslider = function (s) {
var e = this.length;
return this.each(function (n) {
var h = t(this),
o = (new i).init(h, s);
h.data("unslider" + (e > 1 ? "-" + (n + 1) : ""), o)
})
}
}
(window.jQuery, !1);
* {
margin: 0;
padding: 0;
}
#outermin1 {
width : 100%;
}
.banner {
position : relative;
width : auto !important;
overflow : auto;
text-align : center;
}
/*
*/
.banner ul {
list-style : none;
width : 300%;
padding: 0px;
}
.banner ul li {
display : block;
float : left;
width : 33%;
padding : 0 0 110px;
min-height: 1550px !important;
max-height: 1550px !important;
}
.banner h1 {
position : relative;
margin : 0 auto;
height : 120px;
top : 30px;
text-align : center;
font-size : 250% !important ;
color : #FFF;
text-transform : uppercase;
font-weight : 100;
/*line-height : 38px !important ;*/
}
.banner h2 {
text-transform : none;
font-size : 150%;
top : -15px;
position : relative;
color : #FFF;
}
.banner .btn {
display : inline-block;
margin : 25px 0 0;
padding : 9px 22px 7px;
clear : both;
color : #fff;
font-size : 12px;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius : 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .dots {
position: absolute;
left: 0px;
right: 0px;
bottom: -10px;
background: #fff;
height: 103px;
padding-top: 30px;
}
.banner .dots li {
display : inline-block;
width : 10px;
height : 10px;
margin : 0 4px;
text-indent : -999em;
border : #17b7a5 solid 2px;
border-radius : 6px;
cursor : pointer;
opacity : 0.4000000059604644775390625;
transition : background 0.5s, opacity 0.5s;
}
.banner .dots li.active {
background : #17b7a5;
opacity : 1;
}
/*
.banner img {
width: 100%;
margin-top: -143px;
}*/
.banner img {
background-size: cover;
z-index: 3;
}
/* this is the tryout part */
.banner > li { position: relative; }
.banner > li > img { position: absolute; top: 0; width: 3940px !important; text-align: center;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>theimapcter.org</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/banner.css" rel="stylesheet">
<link href="css/egyedi.css" rel="stylesheet"> <!-- a kialakitas -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/unslider.min.js"></script>
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500,
delay: 15000,
complete: function() {},
keys: true,
dots: true,
fluid: true
});
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="svg/impacter_logo_fejlec.svg" alt="logo"></a>
</div>
<div id="navbar" class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li><a href="">Projects</a></li>
<li><a href="">Mindset</a></li>
<li><a href="">Make an impact</a></li>
<li><a href="">Search</a></li>
<li><a href="">Login / Register</a></li>
</ul>
</div>
</nav>
<div class="box" id="outermin1" style="z-index:4">
<!--banner-->
<div class="banner">
<ul>
<li style="background:#00b8a5;"><div class="slider-wrapper"><div class="slide-outer"><div class="slide-szoveg">
<h1 class="cim1">Do you have the ability to respond challenges?</h1><h2 class="cim2">In other words: how do you deal with responsibility?</h2><br/><div class="start-slide"><span class="start-slide1">Start</span><br/><span class="start-slide2">the responsibility quick TEST!</span></div><span class="join-slide">Join the social experiment</span>
<span class="use-slide">Use Impacter platform to develop new ways and solve actual social/environmental<br/>challenges responsibly – meanwhile learn about yourself.</span><span class="find-slide">Find your challenge</span></div></div><img src="https://dl.dropboxusercontent.com/s/8nop7364npk31ue/slide1.png" alt="lab" class="slide1" /></div>
</li>
<li style="background:#8fc453;"><div class="slider-wrapper"><div class="slide-outer"><div class="slide-szoveg">
<h1 class="cim3">Projects with real-life impact</h1><h2 class="cim3">Activate ideas to generate change </h2><br/><br/><span>Upload a challenge</span> <span>Join a project</span></div></div><img src="https://dl.dropboxusercontent.com/s/7l99ejj81bd2g1d/slide2.png" alt="World map" class="slide2" /></div>
</li>
<li style="background:#37c6ea;"><div class="slider-wrapper"><div class="slide-outer"><div class="slide-szoveg">
<h1>Develop new ways to solve actual social / environmental challenges</h1><br/><br/><h2><strong class="line2">– meanwhile learn about yourself.</strong></h2><span>Challenges</span><span>Taking<br/>the responsibility</span><span>Response</span><span>Make an impact</span></div></div><img src="https://dl.dropboxusercontent.com/s/geiezcd6hym6mxt/slide3.png" alt="people on pc" class="slide3" /></div></li>
</ul>
<div style="height:50px;"> </div>
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--<div id="banner-alatt">-->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- </div> -->
<!-- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> -->
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
编辑 2016.07.23.:我忘了说,我只想将图像的 1920px 部分居中。
最佳答案
我更喜欢另一个技巧。我不知道您的特定 slider 是否可以为 div 设置动画,但您可以将图像作为背景图像提供给该 div。比使用 background-size: cover;
浏览器将始终为您选择合适的尺寸。
关于javascript - Unslider:即使在 "low"屏幕分辨率下也能居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38487003/
我正在尝试将 Bootstrap 输入字段置于列 div 的中心,但我尝试过的所有方法似乎都不起作用。 到目前为止我尝试了什么: Enter the inf
这是它的样子: http://i.imgur.com/H0Oqz4Q.png 这是 CSS: #header{ background:url('header.png'); border-radius:
似乎有一个 align 属性工作得非常好,但是可以对齐元素,因此面板上的所有元素都将对齐,以在彼此底部居中,如果它们都小于容器尺寸?类似顶部中心中心的东西。 类似这样的事情: 或者至少水平方向和垂直方
我用 GUI 创建了一个简单的猜谜游戏。问题是,每当我最大化窗口时,整个 GUI 都会卡在顶部中间。我想知道如何将其居中以及如何使其变大。代码如下: import javax.swing.*;
目前我在另一个 View 中有一个 View (它是一个广告),但是因为我使用的是 MATCH_PARENT,所以宽度是整个屏幕的长度,而我只希望它是广告尺寸。现在 WRAP_CONTENT 解决了这
我有一个 UIViewController 子类,它实例化了一个 UIView 子类(我们称之为 viewA)。然后,viewA 有时会实例化另一个 UIView,我们称之为 viewB。 我希望 v
我是 Cocca 和 IOS 开发的新手,发现自己处于以下情况。 我有一张 1024x1024 的背景图片,我想在所有 View 中显示它。我已将以下代码放在应用程序委托(delegate)中的应用程
我正在尝试使用 MathML 作为 HTML5 的一部分来制作居中的盒装数学方程式。问题是盒子。如果我在我的 div 元素上放置一个边框,边框足够高,但它一直延伸到屏幕的左侧和右侧。如果我在我的数学元
我知道这听起来很简单,但它不适合我。我做错了什么? .popuphdr { background-color:#00477f; height:30px; width
我正在为我的网店创建一个新网站 - 我遇到了这个 css 问题...... 系统是在prestashop平台上制作的,但是这是基本的CSS,所以没关系。 在 CMS 页面上,我在将页面居中时遇到问题,
我有一个横跨整个屏幕宽度的按钮: accusantium quia sunt 44% 我希望第一个段落标签中的文本居中,其背景图像紧挨着文本。问题是第一个 居中
http://makememodern.com/portfolio/ 您会看到我在页面上嵌入了一个网站,并且它与页面右侧对齐。我希望它居中。 最佳答案 您将 iframe 的宽度设置为 1100
我的 header 中有一个元素正在从 js 文件中获取数据。 我试图将该元素置于我的页面的中心,但我所做的一切似乎都有效。 我尝试了 margin-left: auto 和 margin-right
这个问题在这里已经有了答案: What does auto do in margin: 0 auto? (8 个答案) 关闭 7 年前。
我试图让这两个按钮并排对齐,在页面的中心垂直和水平。 几个小时以来,我一直在摆弄它,尝试了所有方法,但我无法让它既与页面居中对齐又并排对齐 我希望有人能给我指出正确的方向。谢谢..
我需要将一个 img 居中(带有 class=“key”的那个,但是 float 元素阻止了它。我应该使用什么技术将其居中? 谢谢! GitHub 存储库:https://github.com/Cal
每次我嵌入来自 Google map 的 iframe 时,它都会将标记保留在中间。 即使有工具提示并且只是剪切工具提示数据,它也会这样做: http://jsfiddle.net/V2SVa/
我无法将这些按钮置于页面中央。我只知道我错过了一些愚蠢的东西,但我不知道是什么。这是页面: All Time Last 2 Weeks La
我如何将 div 内的表格 div 对齐到 align=center 最佳答案 asd 关于html - div对齐=居中,我们在Stack Overflow上找到一个类似的问题: htt
有人知道如何在调整浏览器窗口大小时也实现垂直居中吗? 水平效果很好,图像大小调整也很好。我希望图片和链接始终在浏览器中间居中。 另外,为什么 ul 没有像图像那样居中而是向右移动了一点? Here i
我是一名优秀的程序员,十分优秀!