Как разместить текст в промежутке?

Question

См. this сайт

Как получить тестовый тест, который находится в середине диапазона, в котором он содержится?

Использование Twitter Bootstrap.

Я пробовал множество разных способов, например, css, встроенное моделирование, задание полей и т. Д., Но я не могу получить диапазон, чтобы делать то, что мне нужно. Похоже, что его тянет к точной ширине его текста.

Моя основная цель - фактически принести текст Общенациональные предупреждения, чтобы они находились в том же ряду, что и кнопки.

Сложная вещь, что я не могу дать этому промежутку трудно закодированный ширину из-за страницы изменение размера

Пол

Answer 1

Положите цвет фона на пролете, чтобы понять, почему он не работает. Эти три элемента находятся в div без CSS, связанных с ним. Чтобы промежуток находился посередине, вам нужен div, который его окружает, по крайней мере, имеет ширину & свойства выравнивания текста.

Изменить

 <div> 
      <button id="btnPrevious" type="button">Previous</button>     
      <span style="width: 100%;text-align: center">TEST</span> 
      <button id="btnNext" type="button" style="float: right">Next</button> 
     </div> 

в

 <div class="centerTest"> 
      <button id="btnPrevious" type="button">Previous</button>     
      <span style="width: 100%;text-align: center">TEST</span> 
      <button id="btnNext" type="button" style="float: right">Next</button> 
     </div> 

с любым именем вы хотите & использование

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

Кроме того, с этой разметкой, ваш код, как это приведет к тому, пядь до центра , но вам нужно будет добавить float:left в ваш btnPrevious id. Я бы воздержался, насколько это возможно, от использования встроенного CSS, если вы не разрабатываете HTML-адрес электронной почты, поэтому просто создайте файл CSS, который вы включаете LAST в свой список файлов CSS, и добавьте туда свои правки.

Например, если btnPrevious в файле CSS вашего шаблона, в файле CSS, просто добавьте

#btnPrevious { 
    float:left; 
} 

и вы хорошо.

EDIT:

К сожалению пропустил часть Bootstrap, как я только что сделал поиск TEST внутри кода. Bootstrap построен с этими классами, а в том, что те уже внутри контейнера, вы должны быть в состоянии добавить text-center в пустой DIV и он должен сделать трюк

Изменение

 <div> 
      <button id="btnPrevious" type="button">Previous</button>     
      <span style="width: 100%;text-align: center">TEST</span> 
      <button id="btnNext" type="button" style="float: right">Next</button> 
     </div> 

в

 <div class="text-center"> 
      <button id="btnPrevious" type="button">Previous</button>     
      <span style="width: 100%;text-align: center">TEST</span> 
      <button id="btnNext" type="button" style="float: right">Next</button> 
     </div> 

Answer 2

Пространства, как вы подозревали, нарисованы на точной ширине его текста. Вы можете обойти это, установив его стиль на display: block; width: 100%; или любую ширину, которую вы хотели бы. Это испортит все в вашем случае, поскольку у вас есть другие элементы до и после самого диапазона.

Для этого вам необходимо дополнительно установить его положение в абсолютное.

Answer 3

Использование самозагрузки 2.3.0, есть .text-центр класса вы можете использовать 3

<span class="text-center">...</span> 

и нумерацией страниц в центре для начальной загрузки 3

<span class="pagination-centered">...</span>