Question

我已获得以下代码：

HTML：

<div class="label">Middle</div>
<div id='sliderdiv'>
    <input type="range" value="50" min="0" max="100" />
</div>

CSS：

 .label {
     position: absolute;
     margin-top: 13px;
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
 }
 input.ui-slider-input {
     display: none !important;
 }
 #sliderdiv .ui-slider-track {
     margin-left: 15px;
 }

但是我不能把我的文本div放在中心，是否有解决这个问题的方法，或者用css是不可能的？

我可以使用javascript动态计算它，但我想避免这种情况。

以下是您的实时代码：http://jsfiddle.net/VmwQM/

编辑：

这不是我想要的：

.label {
         position: absolute;
         margin-top: 13px;
         margin-left: 50%;
         z-index: 3;
     }

因为我希望我的文字中间率为50％而不是我的文字以50％开头。

Answer 1

你想要这样的东西：

 body {
     text-align: center;
 }
 .label {
   width: 100%;
 }

你的文字将在滑块内：

的 EXAMPLE

Answer 2

你可以试试这个：

<强> Fiddle here

.label {
 position:absolute;
 top:11px;
 width:100%;
 z-index: 3;
 text-align:center;
}
input.ui-slider-input {
 display: none !important;
}
#sliderdiv .ui-slider-track {
 margin-left: 15px;
}

祝你好运..

Answer 3

您无法使用margin：auto定位元素，它们位于绝对位置。它们的display-attribute自动设置为 inline 。

Why margin:auto doesn't work?

jQuery-Solution可以是：

var left = $(window).width() / 2 - $('.label').width() / 2;
$('.label').css('left',left+'px');

Answer 4

margin: 0 auto不适用于绝对定位的元素。只需将left或right属性设置为50％：

即可

.label {
  position: absolute;
  margin-top: 13px;
  left: 50%;
  z-index: 3;
}

不要忘记绝对定位是根据父母计算的。除了该示例之外，您可能还有其他标记会影响position: absolute在应用.label时所执行的操作

Answer 5

使用：

  left: 50%;
  margin-left: -25px;

<强> Working Fiddle

Answer 6

HTML

<div class="slide-holder">
    <div id='sliderdiv'>
        <input type="range" value="50" min="0" max="100" />
    </div>
</div>

CSS

.slide-holder {
    text-align: center;
}
#sliderdiv {
    display: inline-block;
}

Answer 7

如果给出宽度值，您可以将其居中：

.label {
    position: absolute;
    margin: 13px auto auto;
    width: 3rem;
    right: 0; left: 0;
}

有关使用css in this smashing magazine article

对中心绝对元素的更多信息

如何将div放在哪个位置绝对？

7 个答案: