Question

我正在消耗自己找到解决这个问题的方法...... 所以，我有两个内容（内容A 和内容B ），并排浮动。我正在寻找一种方法来集中这个内容，但问题是内容B 有动态宽度，所以我不知道我该怎么做...

这是我的 LIVE EXAMPLE 。

这是我的 CSS 和 HTML 。

CSS

.lean-slider-slide {
    display: none;
    position: relative;
    opacity: 0;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -ms-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
    float: left;
    text-align: left;
}
.lean-slider-slide.current {
    transition: all .9s;
    display: inline-block;
    opacity: 1;
    color: #00ACDE
}
.pglp span {
    float: left;
    font-size: 21px;
    font-family:"museo300";
    margin-right: 5px;
    text-align: right;
    color: #111;
}
div.pglp {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

HTML

<div class="pglp"><span>HELLO: </span>

    <div id="text_slider">
        <div class="text_slide1">
            <p>BANANA</p>
        </div>
        <div class="text_slide2">
            <p>MORANGO</p>
        </div>
        <div class="text_slide3">
            <p>Design Gráfico</p>
        </div>
        <div class="text_slide4">
            <p>NUTELA</p>
        </div>
        <div class="text_slide5">
            <p>PINEAPPLE</p>
        </div>
    </div>
    <p>&nbsp;</p>
</div>

Answer 1

使用 display：inline_block ;并删除浮动：... 我得到了一切都在中心。但是，因为你的第二个信息块不同，HELLO：会一直移动......所以如果这不是你想要的，请指出它，我肯定会再试一次。

将SPAN更改为DIV并添加了班级

 <div class="pglp2">HELLO: </div>

并编辑了你的CSS

.lean-slider-slide {
    display: none;
    position: relative;
    opacity: 0;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -ms-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
    text-align: left;
}
.lean-slider-slide.current {
    transition: all .9s;
    display: inline-block;
    opacity: 1;
    color: #00ACDE 
}
.pglp2 {
    font-size: 21px;
    font-family:"museo300";
    margin-right: 5px;
    display: inline-block;
    color: #111;
}
div.pglp {
    width:100%;
    text-align: center;
}
#text_slider {
   display: inline-block;   
}

请参阅：http://jsfiddle.net/zuSke/

2个div以多个内容为中心

1 个答案: