Question

我想将caption-wrap div垂直放在metaslider div的中心位置。有人可以帮忙吗？

<div style="width: 100%; margin: 0 auto;" class="metaslider metaslider-flex metaslider-364 ml-slider">

    <div id="metaslider_container_364">
        <div id="metaslider_364" class="flexslider">
            <ul class="slides">
                <li style="display: block; width: 100%;" class="slide-370 ms-image">
                    <img src="http://placehold.it/700x300" height="300" width="700" alt="" class="slider-364 slide-370" />
                    <div class="caption-wrap">
                        <div class="caption">
                            <h2 style="text-align:center">Can I place this in centre?</h2>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</div>

Answer 1

真的很简单。只需添加list-style:none;

即可

这里是JSFiddle，你的所有课程都很顺利。

JSFiddle

＆＃13;

* {
    border:black 1px solid;
    text-align:center;
    padding: 0;
    margin: 0;
    list-style: none;
}

＆＃13;

<ul>
    <li>
        <img src="http://placehold.it/300x100" />
         <h2>Can I place this in centre?</h2>
    </li>
</ul>

＆＃13;

Answer 2

我已经解决了： http://jsfiddle.net/LuLkza9L/6/

.caption-wrap {
   position: absolute; 
   top: 45%; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.caption-wrap span { 
    color: red;
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 15px;
    pointer-events: none;

}

.metaslider {
  position:relative;
}

将DIV垂直放置在父DIV的中心？

2 个答案: