html - 如何在 CSS 中对齐元素

Question

我无法将元素对齐在一行中。我正在使用 display: inline-block 但由于某种原因它没有受到影响。我正在使用 DataTables。我希望按钮(图像)与显示页码的框对齐。

CSS

.dataTables_paginate input {
 width: 8%; 
 height: 8%; 
 padding-bottom: 0.2px;
 display: inline-block; 
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
 box-sizing: border-box;
 display: inline-block;
 min-width: 1.5em;
 padding: 0.5em 1em;
 margin-left: 2px;
 text-align: center;
 text-decoration: none !important;
 cursor: pointer;
 *cursor: hand;
 color: #333 !important;
 border: 1px solid transparent;
border-radius: 2px;
}

我的 Jquery

var table = $('#esignTable').DataTable({"sDom": '<"top"flp>rt<"bottom"i><"clear">',
      pagingType: 'input',
      pageLength: 5,
      language: {
        "sEmptyTable": " ",
        oPaginate: {
            "sNext": '<img src="../images/integration/SlowRight.jpg">',
            "sPrevious": '<img src="../images/integration/SlowLeft.jpg">',
            "sFirst": '<img src="../images/integration/FastLeft.jpg">',
            "sLast": '<img src="../images/integration/FastRight.jpg">',
        }
      }   
    });

Answer 1

将 vertical-align:middle 添加到 .dataTables_wrapper .dataTables_paginate .paginate_button

或者使用 flexbox 进行分页

.dataTables_wrapper .dataTables_paginate {
  display:flex;
  flex-direction:row;
  align-items:center;
}