我有一个文本转盘需要对齐,也不知道如何使其子弹活跃.
通过点击下面的演示链接,您会看到项目符号不在页面的中间,并根据名称和文本的大小,名称和项目符号之间的距离得到更改.
我需要所有的(文本,名称,项目符号)在页面的中间任何屏幕尺寸.
.carousel-content {
color: black;
display: flex;
align-items: center;
}
.name {
color: black;
display: block;
font-size: 20px;
text-align: center;
}
.mytext {
border-left: medium none;
font-size: 24px;
font-weight: 200;
line-height: 1.3em;
margin-bottom: 10px;
padding: 0 !important;
text-align: center;
}
.bullets li {
background: none repeat scroll 0 0 #ccc;
border: medium none;
cursor: pointer;
display: inline-block;
float: none;
height: 10px;
width: 10px;
}
.bullets li:last-child {
margin-right: 0;
}
.bullets li {
border-radius: 1000px;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<h3>#1</h3>
<p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#2</h3>
<p>This is another much longer item. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Animi,sint fuga temporibus nam SAEpe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente,ducimus,voluptas,mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#3</h3>
<p>This is the third item.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
setCarouselHeight('#carousel-example');
function setCarouselHeight(id) {
var slideHeight = [];
$(id + ' .item').each(function() {
// add all slide heights to an array
slideHeight.push($(this).height());
});
// find the tallest item
max = Math.max.apply(null,slideHeight);
// set the slide's height
$(id + ' .carousel-content').each(function() {
$(this).css('height',max + 'px');
});
}
UPDATE
我将子弹的代码更改为以下内容,并使其移动到顶部. (在文字的中间)
<div class="col-xs-offset-4 col-xs-8">
<ol class="bullets carousel-indicators">
<li class="active" data-target="#carousel-example" data-slide-to="1"></li>
<li class="" data-target="#carousel-example" data-slide-to="2"></li>
<li class="" data-target="#carousel-example" data-slide-to="3"></li>
</ol>
解决方法
只需一些更改,使其全部工作：
1)零索引.从0开始data-slide-to,而不是从1开始：
<ol class="bullets carousel-indicators">
<li ... data-slide-to="0"></li>
<li ... data-slide-to="1"></li>
<li ... data-slide-to="2"></li>
</ol>
.carousel-content {
...
padding: 20px 0 50px 0;
}
3)子弹偏移.减少底部的子弹偏移看起来更好：
.bullets {
...
bottom: 10px;
}
