css - 将所有按钮水平放置相同

Question

我正在使用 CSS 中的按钮定义从 plsql 打印出一组按钮。

print_out('"<button class=\"btn\" OnClick=\"displaySection(''TOC'',''' || to_char(i) || ''')\">' ||     
    g_sections(i).name || '" +');

我将其打印在表格行内。

我遇到的问题是文本的长度使按钮根据其他按钮上升或下降。文本在按钮中的时间越长，按钮就会比其他按钮高。我还注意到，一旦我在文本末尾放置图标图像，按钮就会向下移动 1 个像素。

这是我的按钮 CSS

.btn {
  border: #000000;
  border-style: solid; 
  border-width: 2px;
  width:190;
  height:50;
  border-radius: 6px;   
  background: linear-gradient(#FFFFFF, #B0B0B0);
  font-weight: bold;
  color: blue; 
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  margin-left: 5px;

我不想在页面中设置按钮的绝对定位，因为每种情况下按钮的数量可能不同。所以根据浏览器窗口的宽度 float 。

所以问题是如何确保按钮始终相互完美地水平对齐。

谢谢

Answer 1

我添加了“vertical-align: middle;”到按钮类并且有效