blocks|key|145909|text|前面提到的Bootstrap+3.0的解决方案在3.1.1上不适用于我。分页类具有display:block，而<li>元素具有float:left，这意味着仅将<ul>包装在text-center中是不起作用的。我不知道3.0和3.1.1之间的变化是如何发生的，什么时候发生的。无论如何，我让<ul>改用display:inline-block。代码如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|145910|<div+class="text-center">
++++<ul+class="pagination"+style="display:+inline-block">
++++++++<li><a+href="...">...</a></li>
++++</ul>
</div>|code-block|syntax|javascript|145911|或者，对于更简洁的设置，可以省略style属性并将其放入样式表中：|145912|.pagination+{
++++display:+inline-block;
}|145913|然后使用前面建议的标记：|145914|<div+class="text-center">
++++<ul+class="pagination">
++++++++<li><a+href="...">...</a></li>
++++</ul>
</div>|145915|entityMap^0|15|D|1K|4|1S|A|29|4|2G|B|43|4|49|K|0|0|G|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|T|$]]

<p>The previously mentioned solutions for Bootstrap 3.0 did not work for me on 3.1.1. The pagination class has <code>display:block</code>, and the <code>&lt;li&gt;</code> elements have <code>float:left</code>, which means merely wrapping the <code>&lt;ul&gt;</code> in <code>text-center</code> alone does not work.  I have no idea how or when things changed between 3.0 and 3.1.1.  Anyway, I had make the <code>&lt;ul&gt;</code> use <code>display:inline-block</code> instead.  Here's the code:</p>

<pre><code>&lt;div class="text-center"&gt;
    &lt;ul class="pagination" style="display: inline-block"&gt;
        &lt;li&gt;&lt;a href="..."&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Or for a cleaner setup, omit the <code>style</code> attribute and put it in your stylesheet instead:</p>

<pre><code>.pagination {
    display: inline-block;
}
</code></pre>

<p>And then use the markup previously suggested:</p>

<pre><code>&lt;div class="text-center"&gt;
    &lt;ul class="pagination"&gt;
        &lt;li&gt;&lt;a href="..."&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>


blocks|key|145935|text|您可以添加自定义Css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|145936|.pagination{
++++display:table;
++++margin:0+auto;
}|code-block|syntax|javascript|145937|谢谢|145938|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can add your custom Css:</p>

<pre><code>.pagination{
    display:table;
    margin:0 auto;
}
</code></pre>

<p>Thank you</p>


blocks|key|364120|text|它对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364121|<div+class="text-center">
<ul+class="pagination+pagination-lg">
+++<li>
++<a+href="#"+aria-label="Previous">
++++<span+aria-hidden="true">&laquo;</span>
++</a>
</li>
<li><a+href="#">1</a></li>
<li><a+href="#">2</a></li>
<li><a+href="#">3</a></li>
<li><a+href="#">4</a></li>
<li><a+href="#">5</a></li>
<li>
++<a+href="#"+aria-label="Next">
++++<span+aria-hidden="true">&raquo;</span>
++</a>
</li>
</ul>|code-block|syntax|javascript|364122|​|364123|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It works for me:</p>

<pre><code>&lt;div class="text-center"&gt;
&lt;ul class="pagination pagination-lg"&gt;
   &lt;li&gt;
  &lt;a href="#" aria-label="Previous"&gt;
    &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
  &lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
  &lt;a href="#" aria-label="Next"&gt;
    &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
  &lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>


blocks|key|364125|text|You+can+use+the+below+code+to+center+pagination+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|364126|​|unstyled|364127|.pagination-centered+{
++++text-align:+center;
}|364128|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"+rel="stylesheet"/>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+class="pagination-centered">
++++<ul+class="pagination">
++++++<li+class="active"><a+href="#">1</a></li>
++++++<li><a+href="#">2</a></li>
++++++<li><a+href="#">3</a></li>
++++</ul>
</div>|364129|364130|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|K|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|F|7|S|8|@]|9|@]|A|$]]]|M|$]]

<pre><code>You can use the below code to center pagination 
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.pagination-centered {
    text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="pagination-centered"&gt;
    &lt;ul class="pagination"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|364159|text|我不能让任何建议的解决方案在Bootstrap+4+alpha+6上工作，但是下面的变体最终让我得到了一个居中的分页栏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364160|CSS覆盖：|364161|.pagination+{
++display:+inline-flex;
++margin:+0+auto;
}|code-block|syntax|javascript|364162|HTML：|364163|<div+class="text-center">
++<ul+class="pagination">
++++<li><a+href="...">...</a></li>
++</ul>
</div>|364164|包装div上的display、margin或类的其他组合似乎都不起作用。|offset|length|style|CODE|364165|entityMap^0|0|0|0|0|0|7|7|F|6|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]|$O|12|P|13|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p>I couldn't get any of the proposed solutions to work with Bootstrap 4 alpha 6, but the following variation finally got me a centred pagination bar.</p>

<p>CSS override:</p>

<pre><code>.pagination {
  display: inline-flex;
  margin: 0 auto;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="text-center"&gt;
  &lt;ul class="pagination"&gt;
    &lt;li&gt;&lt;a href="..."&gt;...&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>No other combination of <code>display</code>, <code>margin</code> or class on the wrapping div seemed to work.</p>


blocks|key|364206|text|要使BS4中的分页居中，应在ul中添加justify-content-center|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|364207|​|364208|+<nav+aria-label="Page+navigation+example">
++++<ul+class="pagination+justify-content-center">
++++++<li+class="page-item+disabled">
++++++++<a+class="page-link"+href="#"+tabindex="-1">Previous</a>
++++++</li>
++++++<li+class="page-item"><a+class="page-link"+href="#">1</a></li>
++++++<li+class="page-item"><a+class="page-link"+href="#">2</a></li>
++++++<li+class="page-item"><a+class="page-link"+href="#">3</a></li>
++++++<li+class="page-item">
++++++++<a+class="page-link"+href="#">Next</a>
++++++</li>
++++</ul>
++</nav>

<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"+integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP%2BVmmDGMN5t9UJ0Z"+crossorigin="anonymous">|code-block|syntax|javascript|364209|364210|有关详细信息，请参阅Pagination+Bootstrap+4。|364211|entityMap|0|LINK|mutability|MUTABLE|url|https://v4-alpha.getbootstrap.com/components/pagination/^0|E|2|J|M|0|0|0|0|A|M|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>To centered the pagination in BS4, should add <code>justify-content-center</code> in <code>ul</code>:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;nav aria-label="Page navigation example"&gt;
    &lt;ul class="pagination justify-content-center"&gt;
      &lt;li class="page-item disabled"&gt;
        &lt;a class="page-link" href="#" tabindex="-1"&gt;Previous&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
      &lt;li class="page-item"&gt;
        &lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;

&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;</code></pre>
</div>
</div>
</p>
<p>See <a href="https://v4-alpha.getbootstrap.com/components/pagination/" rel="noreferrer">Pagination Bootstrap 4</a> for further information.</p>


blocks|key|146055|text|在v4.0.0-alpha.6中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146056|<div+class="text-center+text-sm-right">
++++<ul+class="pagination+d-inline-flex">...</ul>
</div>|code-block|syntax|javascript|146057|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In v4.0.0-alpha.6:</p>

<pre><code>&lt;div class="text-center text-sm-right"&gt;
    &lt;ul class="pagination d-inline-flex"&gt;...&lt;/ul&gt;
&lt;/div&gt;
</code></pre>


blocks|key|146068|text|这个css适用于我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146069|.dataTables_paginate+{
+++float:+none+!important;
+++text-align:+center+!important;
}|code-block|syntax|javascript|146070|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This css works for me:</p>

<pre><code>.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
</code></pre>


blocks|key|146091|text|使用laravel和bootstrap+4，有效的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146092|<div+class="d-flex">
++++<div+class="mx-auto">
++++++++{{$products->links("pagination::bootstrap-4")}}
++++</div>
</div>|code-block|syntax|javascript|146093|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Using laravel with bootstrap 4, the solution that worked:</p>
<pre><code>&lt;div class=&quot;d-flex&quot;&gt;
    &lt;div class=&quot;mx-auto&quot;&gt;
        {{$products-&gt;links(&quot;pagination::bootstrap-4&quot;)}}
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|364313|text|引导程序4：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364314|
<ul+class="pagination"+style="margin:20px+0">
++<li+class="page-item">...</li>
</ul>


<ul+class="pagination+justify-content-center"+style="margin:20px+0">
++<li+class="page-item">...</li>
</ul>


<ul+class="pagination+justify-content-end"+style="margin:20px+0">
++<li+class="page-item">...</li>
</ul>+|code-block|syntax|javascript|364315|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>bootstrap 4 :</p>

<pre><code>&lt;!-- Default (left-aligned) --&gt;
&lt;ul class="pagination" style="margin:20px 0"&gt;
  &lt;li class="page-item"&gt;...&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Center-aligned --&gt;
&lt;ul class="pagination justify-content-center" style="margin:20px 0"&gt;
  &lt;li class="page-item"&gt;...&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Right-aligned --&gt;
&lt;ul class="pagination justify-content-end" style="margin:20px 0"&gt;
  &lt;li class="page-item"&gt;...&lt;/li&gt;
&lt;/ul&gt; 
</code></pre>


<p>I have this code in pagination</p>

<pre><code>&lt;div class="pagination"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="?p=0" data-original-title="" title=""&gt;1&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="?p=1" data-original-title="" title=""&gt;2&lt;/a&gt;&lt;/li&gt; 
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>But my <code>ul</code> is left aligned. Is there any way to center the <code>ul</code> wrt <code>div</code>?</p>

<p>I tried <code>margin: auto auto</code> and <code>margin :0 auto</code> they but didn't work.</p>


Centering the pagination in bootstrap

我在分页中有这段代码<div class="pagination">    <ul>        <li><a href="?p=0" data-original-title="" title="">1</a></li>         <li><a href="?p=1" data-original-title="...

问在bootstrap中将分页居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在bootstrap中将分页居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在bootstrap中将分页居中
EN