Question

我试图让UL.pagination位于父级视图区域的中心，而不使用float，因为它会中断我的风格。这可能吗？

我还不熟悉SO，但我的观点是触发.pagination父级的scrollLeft，以便在其父级的中心保持分页。

这是我对jsFiddle

的尝试

＆＃13;

WITH vars (CalendarDate) AS (
    SELECT DATE '2015-01-20' FROM DUAL
)
SELECT 
    TIME_OF_DAY, COUNT(TIME_OF_DAY) ISSUE_ACTIVITY_COUNT
FROM
    (SELECT
        case 
            when to_char(CREATED_DT,'mi') between '00' and '14' then TO_CHAR(trunc(CREATED_DT,'HH24') + interVal '15' minute,'HH24:MI')
            when to_char(CREATED_DT,'mi') between '15' and '29' then TO_CHAR(trunc(CREATED_DT,'HH24') + interVal '30' minute,'HH24:MI')
            when to_char(CREATED_DT,'mi') between '30' and '44' then TO_CHAR(trunc(CREATED_DT,'HH24') + interVal '45' minute,'HH24:MI')
            when to_char(CREATED_DT,'mi') between '45' and '59' then TO_CHAR(trunc(CREATED_DT,'HH24') + interVal '60' minute,'HH24:MI')
        end as TIME_OF_DAY
    FROM
        CE.ISSUE_ITEM i CROSS JOIN vars
    WHERE
        (TRUNC(i.CREATED_DT) = vars.CalendarDate)) -- "Variable" from CTE here
    GROUP BY
        TIME_OF_DAY
    ORDER BY
        TIME_OF_DAY;

＆＃13;

/* my goal is to make pagination in the center of the view-area */
$.fn.StickyX = function() {
  // alert(this.parentNode.clientWidth);
  //	alert($(this).parent().innerWidth());
  return this.css({
    'margin-left': ($(this).parent().innerWidth() / 2) - ($(this).width() / 2) + 'px',
    'position': 'inline'
  });
};
$('.pagination').StickyX();

＆＃13;

#dataTable .pagination {
  margin: 0;
  padding: 0;
}

＆＃13;

我做了一些修改js，其中一些如何解决问题，但仍需要一些帮助。 jsfiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="wrapper">
  <div id="header">
    Header
  </div>
  <div class="row">
    <div class="col-xs-9 contents">

      <div class="table-responsive">
        <table class="table table-bordered table-hover table-striped table-condensed" id="dataTable">
          <thead class="text-primary">
            <tr>
              <th role="group" aria-label="">
                <button type="button" class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus"></i>
                </button>
                <button type="button" class="btn btn-default btn-refresh"><i class="glyphicon glyphicon-refresh"></i>
                </button>
              </th>
              <th>id</th>
              <th>User name</th>
              <th>password</th>
              <th>Full name</th>
              <th>Email</th>
              <th>URL</th>
              <th>Join date</th>
              <th>activation_key</th>
              <th>lastupdate</th>
              <th>status</th>
              <th>groupID</th>
              <th>title</th>
            </tr>
          </thead>
          <tbody>
            <tr id="row-1">
              <td class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
                </button>
                <button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
                </button>
              </td>
              <td>1</td>
              <td>admin.admin</td>
              <td>**********</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>2015-12-07 02:37:47</td>
              <td>&nbsp;</td>
              <td>2015-12-06 18:37:47</td>
              <td>isActive</td>
              <td>isSuperAdmin</td>
              <td>Super Admin</td>
            </tr>
            <tr id="row-2">
              <td class="btn-group" role="group" aria-label="">
                <button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
                </button>
                <button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
                </button>
              </td>
              <td>2</td>
              <td>demo.demo</td>
              <td>***********</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>0000-00-00 00:00:00</td>
              <td>&nbsp;</td>
              <td>2016-01-05 12:45:32</td>
              <td>isActive</td>
              <td>isSuperAdmin</td>
              <td>demo</td>
            </tr>
            <tr>
              <td class="page-control" colspan="13">
                <ul class="pagination">
                  <li class="disabled">
                    <a href="#Prv" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="active"><a href="#page1">1<span class="sr-only">(current)</span></a>
                  </li>
                  <li><a href="#page2">2</a>
                  </li>
                  <li><a href="#page3">3</a>
                  </li>
                  <li><a href="#page4">4</a>
                  </li>
                  <li><a href="#page5">5</a>
                  </li>
                  <li>
                    <a href="#Nxt" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
          <tfoot></tfoot>
        </table>
      </div>
    </div>
    <div class="col-xs-3">
      [Menu]
    </div>
  </div>
  <div>
    Footer
  </div>
</div>

Answer 1

要实现这一点，你只需要css和html。试试这个：

td.page-control { text-align:center; }
ul.pagination { margin:0 auto; }

调整代码以确保它不会被现有样式覆盖。

并禁用将边距添加到ul

的javascript

https://jsfiddle.net/ksqzpfm9/1/

您可以使用相同的方法水平居中其他元素

StickyX元素没有浮动

1 个答案: