[英]Align center when element width < viewport, align right + scroll when element width > viewport
I'd like to have an element centered inside a viewport as long as it is smaller than the viewport and scrollable + aligned right as long as it is bigger than the viewport. 我想让一个元素居中在视口中,只要它小于视口并且可滚动+对齐,只要它比视口大。 Like this:
像这样:
First I tried without Javascript, but float and overflow are knocking each other out. 首先我尝试没有Javascript,但浮动和溢出正在互相敲门。 Then I tried putting a div with float:right next to the element and setting it's width programatically through Javascript.
然后我尝试使用float放置一个div:在元素旁边并通过Javascript以编程方式设置它的宽度。 But the element wouldn't stick to the right when it's smaller than the viewport.
但是当它比视口小时,元素不会粘在右边。
I'm out of ideas now, any suggestions would be very welcome. 我现在没有想法,任何建议都会非常受欢迎。
I have a solution, which works if it's possible for you to replace the regular spaces inside the text with non-breaking-space entities
我有一个解决方案,如果你可以用非破坏空间实体替换文本中的常规空格,它就有效
: :
http://codepen.io/anon/pen/vKgydN http://codepen.io/anon/pen/vKgydN
Here is the essential part of the settings: 以下是设置的基本部分:
.x1 { /* wrapper for text container */
display: flex;
flex-direction: row-reverse;
overflow: hidden;
}
.x2 { /* text container */
flex: 0 0 auto;
display: inline-block;
align-items: flex-start;
margin: 0 auto;
}
So it's a reverse flex container with only one flex item which is not allowed to grow or shrink, has margin: 0 auto
for centering and align-items: flex-start
for right alignment when it's becoming narrower than the parent element/viewport. 因此它是一个反向弹性容器,只有一个不允许增长或缩小的弹性项目,具有
margin: 0 auto
居中和align-items: flex-start
当它变得比父元素/视口更窄时,右对齐的align-items: flex-start
。
EDIT/additional remark: I forgot about the scrolling ability, and right now I can't find a solution for it. 编辑/补充说明:我忘记了滚动功能,现在我找不到解决方案。 Nevertheless, I leave this "half answer" here - maybe someone else comes up with the rest....
不过,我在这里留下了这个“半答案” - 也许其他人想出了其余的......
Meanwhile I have achieved the desired behaviour by utilizing JQuery. 同时我通过使用JQuery实现了期望的行为。 It's not perfect and I still wish there would be a solution without Javascript.
它并不完美,我仍然希望有一个没有Javascript的解决方案。
Here's what I've done to make it work. 这就是我为使其发挥作用所做的一切。
HTML: HTML:
<div class="breadcrumb-scroller-container">
<div class="breadcrumb-scroller">
scroller content
</div>
</div>
CSS: CSS:
.breadcrumb-scroller-container {
text-align: center;
}
.breadcrumb-scroller {
overflow: auto;
white-space: nowrap;
}
Javascript (JQuery): Javascript(JQuery):
$(document).ready(function() {
// scroll left to a maximum of 10000px just to be sure
$(".breadcrumb-scroller").scrollLeft(10000);
});
If you have timing issues with $(document).ready() firing too early and before the scroller has been initialized by the browser, give it a short delay: 如果你的$(document).ready()发生时间问题太早,而且在浏览器初始化了滚动条之前,请给它一个短暂的延迟:
$(document).ready(function() {
setTimeout(function() {
$(".breadcrumb-scroller").scrollLeft(10000);
}, 500);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.