Question

我已经尝试了所有方法，我想要红色的按钮位于标题旁边的中心，并且在按钮内显示文本“ df”。请建议

HTML代码：

<th style="width:11.5%;font-weight:bold;text-align:center;" valign="middle">
Table heading1 
<div id="myButton1" class='myButtons' style=" text-align: left;" >df</div>
</th>

CSS：

$(".myButtons").button().css({ 'width': '15%','height' : '10px','line-height': '10px',
                               'padding-top': '0px',
                               'padding-bottom': '0px',
                               'font-size': '11px',
                               'background':'#ff0000',
                               'font-family': 'Century Gothic, sans-serif', 
                               'text-align':'left',
                               'border-color':'#ff0000',
                               'border-radius':'2px',
                              });

Output right now

Answer 1

您可以尝试将按钮的display属性设置为inline-block并向其中添加vertical-align: middle，如下所示：

$(".myButtons").css({
  'width': '15%',
  'height': '10px',
  'line-height': '10px',
  'display': 'inline-block',
  'padding-top': '0px',
  'padding-bottom': '0px',
  'font-size': '11px',
  'background': '#ff0000',
  'font-family': 'Century Gothic, sans-serif',
  'text-align': 'left',
  'border-color': '#ff0000',
  'border-radius': '2px',
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th style="width:11.5%;font-weight:bold;text-align:center;" valign="middle">
      Table heading1
      <div id="myButton1" class='myButtons' style=" text-align: left;">df</div>
    </th>
  </tr>
</table>

如何在标签内的div标签中垂直对齐文本？

1 个答案: