文本框不在滑块的居中位置

Question

作为我之前的问题的继续How to make the textbox above the slider。

文本框需要显示在两个滑块的中心。

我该怎么做？

这是我的Jsfiddle。

http://jsfiddle.net/Cv9DM/12/

css：

.view-fifth:hover img {
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
   transform: translateX(300px);
}

注意：使“结果”选项卡稍微宽一点以使两个滑块在水平中可见

横向屏幕如下所示

编辑：预期输出：

Answer 1

检查this

更改了输入的CSS

<input type='text' style="z-index:999;position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -82px; width:160px; padding: 4px;">

添加div以包装幻灯片.outer

.outer {
    position: relative;
    height: 200px;
    float: left
}

Answer 2

这是你想要的吗？

小提琴： fiddle

<div>
    <input type='text' style="z-index:999;position: absolute;
top: 70px;
left: 230px;">
<div class="view view-fifth">

<img src="http://s15.postimg.org/aranu1b5n/image.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="http://s15.postimg.org/aranu1b5n/image.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>

Answer 3

如果您需要input框垂直居中，则可以使用此属性。请参阅 DEMO 。

input[type="text"]{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  z-index:1;
  position:fixed;
  left:18em;
 top:9em;
}

Answer 4

根据您的修改，您需要使用position:fixed代替position:absolute。

 <div style="z-index:999;position: fixed; top: 50px; left:0; right:0; margin:0px auto;"><input type='text' /></div>

DEMO

Answer 5

你也可以参考这个 with use of jQuery

<div class="view-ten clearfix">
    <input type='text' class='textbox' style="z-index:999;position: absolute;"/>
</div>
<div class="view view-fifth"></div>
<div class="view view-fifth"></div>