如何在jQuery移動小部件上居中文本

Question

我需要在我正在處理的移動應用程序中的滑塊上有兩段文字。

這裏是一個樣機我需要什麼：

我需要的「沒有那回事」沖洗與滑塊軌道和「非常好」齊平的它結束的開始。用戶可以旋轉手機，使應用程序進入橫向模式，無論設備的方向如何，我都需要標籤與滑塊軌道保持齊平。

什麼是CSS規則來實現這一目標？

更新

這裏是我的滑塊控件代碼：

'<h3>Think about how you feel right now:</h3>\ 
    <h2>Right now, I feel:</h2>\ 
    <div class="jqmslidercontsurvey1a">\ 
     <div data-role="fieldcontain" class="jquerymobileslidercont">\ 
      <label for="slider-happy" class="sliderlabel">Happy:</label>\ 
      <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\ 
     </div>\ 
     \ 
     <div data-role="fieldcontain" class="jquerymobileslidercont">\ 
      <label for="slider-relax" class="sliderlabel">Relaxed:</label>\ 
      <input type="range" name="slider-relax" id="slider-relax" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\ 
     </div>\ 
     \ 
     <div data-role="fieldcontain" class="jquerymobileslidercont">\ 
      <label for="slider-cheer" class="sliderlabel">Cheerful:</label>\ 
      <input type="range" name="slider-cheer" id="slider-cheer" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\ 
     </div>\ 
    </div>'; 

我不知道我應該使用什麼類型的文本元素的，所以我沒有任何代碼，所屬到滑塊上面的文本...我想帶ID的標題雖然

Answer 1

如果你沒有在每個標籤/滑塊對周圍使用fieldcontain角色，你可以添加一個<div>和2 <span><label>和<input>之間的標記，然後使用一些CSS排列它們。

<div class="jquerymobileslidercont"> 
    <label for="slider-happy" class="sliderlabel">Happy:</label> 
    <div><span class="leftSpan">Not at all</span><span class="rightSpan">Very much</span></div> 
    <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true" /> 
</div> 

.jquerymobileslidercont .leftSpan{ 
    margin-left: 68px; 
} 
.jquerymobileslidercont .rightSpan{ 
    position: absolute; 
    right: 0px; 
    margin-right: 30px; 
} 

第二個<span>通過絕對定位位於右側。如果您需要這些標籤的不同字體，字體大小，顏色等，只需添加到這些CSS規則。

這裏是一個DEMO