代码之家  ›  专栏  ›  技术社区  ›  puk

如何将多个元素并排放置在一个div中并居中[duplicate]

  •  0
  • puk  · 技术社区  · 5 年前

    我正在实现分页,它需要居中。问题是链接需要显示为块,所以它们需要浮动。但是, text-align: center; 对它们不起作用。我可以通过将wrapper div padding设置为left来实现这一点,但是每个页面都有不同的页数,所以这不起作用。这是我的代码:

    .pagination {
      text-align: center;
    }
    .pagination a {
      display: block;
      width: 30px;
      height: 30px;
      float: left;
      margin-left: 3px;
      background: url(/images/structure/pagination-button.png);
    }
    .pagination a.last {
      width: 90px;
      background: url(/images/structure/pagination-button-last.png);
    }
    .pagination a.first {
      width: 60px;
      background: url(/images/structure/pagination-button-first.png);
    }
    <div class='pagination'>
      <a class='first' href='#'>First</a>
      <a href='#'>1</a>
      <a href='#'>2</a>
      <a href='#'>3</a>
      <a class='last' href='#'>Last</a>
    </div>
    <!-- end: .pagination -->

    为了得到这个想法,我想要的是:

    alt text

    0 回复  |  直到 6 年前