Question

我似乎无法将我的图像滑块放在中心，看起来像是一个简单的修复，但我无法让它在我的页面中间居中（左中和右上，居中顶部和底部））有什么建议？ CSS中的图像滑块为#logo-and-slider

继承人jsfiddle：http://jsfiddle.net/gZDVL/13/（感谢@MaggiQall）

Answer 1

我不明白。

这是您想要的结果吗？

 <div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>

    <div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>

    <div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>

我关闭了你的img-tags。使用/＆gt;

http://jsfiddle.net/gZDVL/2/

Answer 2

我不确定您是否要将徽标包含在要居中的内容中。我已经在下面展示了这个想法。我添加了一些边框来清楚地显示元素的布局方式。如果您不想包含徽标，请将其从HTML结构中删除。基本上我所做的是将内容放在table-cell元素中，内容中心水平对齐，中间垂直对齐。这将内容置于死亡中心＆＃34;如你所愿:-)在http://jsfiddle.net/linuxexpert/WYadL/

看到小提琴

HTML：

<html>
    <body>
        <div class="outer-box">
            <div class="inner-box">
                <div class="innermost-box">
                    <div class="logo">
                        Logo
                    </div>
                    <div class="controller">
                        <
                    </div>
                    <div class="scroller">
                        Image scroller
                    </div>
                    <div class="controller">
                        >
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS：

html, body {
    width:100%;
    height:100%;
}

.outer-box {
    display:table;
    width:100%;
    height:100%;
}

.inner-box {
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
    border:1px solid red;
    text-align:center;
}

.innermost-box {
    display:table;
    height:50%;
    width:80%;
    margin:0px auto;
    border:1px solid blue;
}

.innermost-box > * {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    border:1px solid green;
}

.logo {
    width:40%;
}

.controller {
    width:5%;
}

.scroller {
    width:50%;
}

图像滑块不会居中

2 个答案: