HTML按钮垂直对齐

Question

I'm trying to set the CSS for displaying links as buttons. 我试图设置CSS以将链接显示为按钮。

The issue I am having is whenever the buttons require multiple lines of text, the other buttons on the same line are lowered slightly. 我遇到的问题是，每当按钮需要多行文本时，同一行上的其他按钮就会稍微降低。

Code below; 下面的代码；

<html>
  <head>
    <style>
      .pagebutton {
        background-color: #0039a6;
        color: white;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        cursor: pointer;
        border: 10px solid #0039a6;
        border-radius: 16px;
        margin:5px;
        padding:10px;
        width: 200px;
        height: 50px;
    </style>
  </head>
  <body>
    <a href="https://www.google.com.au" class="pagebutton">Corporate Image Library</a>
    <a href="https://www.google.com.au" class="pagebutton">Employee Assistance Program</a>
    <a href="https://www.google.com.au" class="pagebutton">Employee Benefits</a>
    <a href="https://www.google.com.au" class="pagebutton">Health Site</a>
    <a href="https://www.google.com.au" class="pagebutton">News & Announcments</a>
    <a href="https://www.google.com.au" class="pagebutton">Social Club Site</a>
    <a href="https://www.google.com.au" class="pagebutton">Better Way Suggestions</a>
    <a href="https://www.google.com.au" class="pagebutton">Phone Contact List</a>
    <a href="https://www.google.com.au" class="pagebutton">Public Website</a>
    <a href="https://www.google.com.au" class="pagebutton">Contact Template Procedure Decision Tree</a>
    <a href="https://www.google.com.au" class="pagebutton">Whistleblower Integrity Hotline</a>
  </body>
</html>

Answer 1

Set the vertical-align property to top . 将vertical-align属性设置为top 。 The initial value of this is causing multi-line inline blocks to not render on the same line. 此值的初始值导致多行内联块无法呈现在同一行上。

HTML按钮垂直对齐

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-17 02:07:24

HTML按钮垂直对齐

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-17 02:07:24

解决方案1
0 已采纳 2018-01-17 02:07:24