Ссылки не выравниваются, если несколько строк

Question

Я создаю страницу меню с несколькими ссылками для использования группой учителей.Я хочу, чтобы ссылки были видны как кнопки для удобства навигации на рабочем столе, сенсорном экране или телефоне.У меня есть следующий код:

a.buttons:link, a:visited {
    background: #001E60; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#34657F, #001E60); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#34657F, #001E60); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#34657F, #001E60); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#34657F, #001E60); /* Standard syntax */line-height: 50px; 
    color: white;
    border: 2px solid #EAAA00;
    padding-top: 20px;
    padding-left: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    width: 300px;
    height: 100px;
    font-size: 20px;
}

Это, кажется, работает как ожидалось, если текст ссылки не переносится на две строки.Если это так, ссылка не выровнена по горизонтали.Пример приведен ниже, а текст ссылки «Форма предварительного одобрения профессионального развития» вызывает смещение.Полный URL-адрес страницы здесь .Как лучше всего выполнить то, что я пытаюсь сделать?

<h1>Faculty</h1>
<h2>Bible Studies</h2>
<a href='http://princeave.com/0/revelations_ablaze.php' title='This is a 9 part series by Pastor Josh Smith from Prince Avenue on chapters 1-5 of Revelation.  This series is available  in audio or video format.' target='_blank' class='buttons'> Ablaze With His Glory</a>
<a href='http://princeave.com/0/a_study_of_philippians.php' title='This is a 27 part series by Pastor Josh Smith from Prince Avenue on the book of Philippians.  This series is available  in audio or video format.' target='_blank' class='buttons'> Philippians - Together for the Gospel</a>
<h2>Forms</h2>
<a href='https://princeave-my.sharepoint.com/personal/keley_princeave_org/_layouts/15/guestaccess.aspx?guestaccesstoken=LeveEcmr5rB%2fF%2fmUPS17uXPjuStCSmAaeWcmJsLS4E0%3d&docid=2_1ba3837b874174956adb1089d9cad2ca7&rev=1' title='Form to renew an ACSI certificate' target='_blank' class='buttons'> ACSI Certification Application</a>
<a href='hhttps://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Education%20Assistance%20Form%20(fillable).pdf' title='Form to request funds for pursuing an advanced degree' target='_blank' class='buttons'> Education Assistance Form</a>
<a href='https://princeave.sharepoint.com/:b:/g/PACS%20Faculty/Ec5ahbAa5BpEvU6Z_Ge0ysUBYbAxnvzr2fAnSyAQWsDrQQ?e=8t1Z53' title='The faculty handbook' target='_blank' class='buttons'> Employee Handbook</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/Shared%20Documents/Forms/AllItems.aspx?id=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips%2FField%20Trip%20Approval%20Process%2Epdf&parent=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips' title='' target='_blank' class='buttons'> Field Trip Approval Process</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/_layouts/15/WopiFrame.aspx?sourcedoc=%7BB58B1578-901F-4116-9B29-86D7DF95BBBF%7D&file=Field%20Trip%20Form.xlsx&action=default' title='' target='_blank' class='buttons'> Field Trip Form</a>
<a href='https://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Professional%20Development%20Prior%20Approval%20Form%20(Fillable).pdf' title='Form to request funds for Professional Development seminar, class, etc.' target='_blank' class='buttons'> Professional Development Prior Approval Form</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSdcY-g1mL6ZNR4RG6XleiSmZyEnEXKhRvwzGzxOdrmE7gifnw/viewform' title='Request ACSI CEUs by awarded to you for completion of an existing CEU course.' target='_blank' class='buttons'> Request CEU credits</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSddr1ZeyOmmllKXxG8-lvwmCH-wMpEhOwPDGEjTvxJ-BknXOw/viewform' title='Submit a webinar, conference, or Bible study to determine if ACSI CEUs can be granted. Please fill out the fields on this page.' target='_blank' class='buttons'> Request New CEU course</a>

Answer 1

Я исправил вас с помощью flexbox, переместил немного CSS и обернул ваши A в DIV.ВСЕГДА оборачивайте ваши элементы в div для макета:

.link-boxes
{
  display: flex;
  flex-wrap: wrap;
}

.link-boxes > div
{
	padding: 0.5em;
	display: flex;
	background: #001E60; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#34657F, #001E60); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#34657F, #001E60); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#34657F, #001E60); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#34657F, #001E60); 
	border: 2px solid #EAAA00;
	margin-top: 1rem;
	width: 300px;
	height: 100px;
	text-align: center;
}

.link-boxes > div:not(:last-of-type)
{
	margin-right: 1rem;
}

.link-boxes > div > a
{
	vertical-align: middle;
	color: white;
	text-decoration: none;
	font-size: 20px;
	margin: auto;
}

<h1>Faculty</h1>
<h2>Bible Studies</h2>
<div class="link-boxes">
  <div>
		<a href='http://princeave.com/0/revelations_ablaze.php' title='This is a 9 part series by Pastor Josh Smith from Prince Avenue on chapters 1-5 of Revelation.  This series is available  in audio or video format.' target='_blank' class='buttons'> Ablaze With His Glory</a>
  </div>
  <div>
		<a href='http://princeave.com/0/a_study_of_philippians.php' title='This is a 27 part series by Pastor Josh Smith from Prince Avenue on the book of Philippians.  This series is available  in audio or video format.' target='_blank' class='buttons'> Philippians - Together for the Gospel</a>
  </div>
</div>

<h2>Forms</h2>

<div class="link-boxes">
  <div>
		<a href='https://princeave-my.sharepoint.com/personal/keley_princeave_org/_layouts/15/guestaccess.aspx?guestaccesstoken=LeveEcmr5rB%2fF%2fmUPS17uXPjuStCSmAaeWcmJsLS4E0%3d&docid=2_1ba3837b874174956adb1089d9cad2ca7&rev=1' title='Form to renew an ACSI certificate' target='_blank' class='buttons'> ACSI Certification Application</a>
  </div>
  <div>
<a href='hhttps://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Education%20Assistance%20Form%20(fillable).pdf' title='Form to request funds for pursuing an advanced degree' target='_blank' class='buttons'> Education Assistance Form</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/:b:/g/PACS%20Faculty/Ec5ahbAa5BpEvU6Z_Ge0ysUBYbAxnvzr2fAnSyAQWsDrQQ?e=8t1Z53' title='The faculty handbook' target='_blank' class='buttons'> Employee Handbook</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/Shared%20Documents/Forms/AllItems.aspx?id=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips%2FField%20Trip%20Approval%20Process%2Epdf&parent=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips' title='' target='_blank' class='buttons'> Field Trip Approval Process</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/_layouts/15/WopiFrame.aspx?sourcedoc=%7BB58B1578-901F-4116-9B29-86D7DF95BBBF%7D&file=Field%20Trip%20Form.xlsx&action=default' title='' target='_blank' class='buttons'> Field Trip Form</a>
  </div>
  <div>
<a href='https://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Professional%20Development%20Prior%20Approval%20Form%20(Fillable).pdf' title='Form to request funds for Professional Development seminar, class, etc.' target='_blank' class='buttons'> Professional Development Prior Approval Form</a>
  </div>
  <div>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSdcY-g1mL6ZNR4RG6XleiSmZyEnEXKhRvwzGzxOdrmE7gifnw/viewform' title='Request ACSI CEUs by awarded to you for completion of an existing CEU course.' target='_blank' class='buttons'> Request CEU credits</a>
  </div>
  <div>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSddr1ZeyOmmllKXxG8-lvwmCH-wMpEhOwPDGEjTvxJ-BknXOw/viewform' title='Submit a webinar, conference, or Bible study to determine if ACSI CEUs can be granted. Please fill out the fields on this page.' target='_blank' class='buttons'> Request New CEU course</a>
  </div>
</div>

См .: https://codepen.io/cloudulus/pen/BMmmXJ

Answer 2

Вам не хватает: vertical-align:top;

Свойство CSS с вертикальным выравниванием устанавливает вертикальное выравнивание встроенного блока или ячейки таблицы.

См. это для получения дополнительной информации ( Связано ).

Пример фрагмента:

a.buttons:link, a:visited {
    background: #001E60; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#34657F, #001E60); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#34657F, #001E60); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#34657F, #001E60); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#34657F, #001E60); /* Standard syntax */line-height: 50px; 
    color: white;
    border: 2px solid #EAAA00;
    padding-top: 20px;
    padding-left: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    width: 300px;
    height: 100px;
    font-size: 20px;
    vertical-align:top;
}

<h1>Faculty</h1>
<h2>Bible Studies</h2>
<a href='http://princeave.com/0/revelations_ablaze.php' title='This is a 9 part series by Pastor Josh Smith from Prince Avenue on chapters 1-5 of Revelation.  This series is available  in audio or video format.' target='_blank' class='buttons'> Ablaze With His Glory</a>
<a href='http://princeave.com/0/a_study_of_philippians.php' title='This is a 27 part series by Pastor Josh Smith from Prince Avenue on the book of Philippians.  This series is available  in audio or video format.' target='_blank' class='buttons'> Philippians - Together for the Gospel</a>
<h2>Forms</h2>
<a href='https://princeave-my.sharepoint.com/personal/keley_princeave_org/_layouts/15/guestaccess.aspx?guestaccesstoken=LeveEcmr5rB%2fF%2fmUPS17uXPjuStCSmAaeWcmJsLS4E0%3d&docid=2_1ba3837b874174956adb1089d9cad2ca7&rev=1' title='Form to renew an ACSI certificate' target='_blank' class='buttons'> ACSI Certification Application</a>
<a href='hhttps://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Education%20Assistance%20Form%20(fillable).pdf' title='Form to request funds for pursuing an advanced degree' target='_blank' class='buttons'> Education Assistance Form</a>
<a href='https://princeave.sharepoint.com/:b:/g/PACS%20Faculty/Ec5ahbAa5BpEvU6Z_Ge0ysUBYbAxnvzr2fAnSyAQWsDrQQ?e=8t1Z53' title='The faculty handbook' target='_blank' class='buttons'> Employee Handbook</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/Shared%20Documents/Forms/AllItems.aspx?id=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips%2FField%20Trip%20Approval%20Process%2Epdf&parent=%2FPACS%20Faculty%2FShared%20Documents%2FField%20Trips' title='' target='_blank' class='buttons'> Field Trip Approval Process</a>
<a href='https://princeave.sharepoint.com/PACS%20Faculty/_layouts/15/WopiFrame.aspx?sourcedoc=%7BB58B1578-901F-4116-9B29-86D7DF95BBBF%7D&file=Field%20Trip%20Form.xlsx&action=default' title='' target='_blank' class='buttons'> Field Trip Form</a>
<a href='https://princeave.sharepoint.com/PACS%20-%20Academic%20Dean/Shared%20Documents/Form/PACS%20Professional%20Development%20Prior%20Approval%20Form%20(Fillable).pdf' title='Form to request funds for Professional Development seminar, class, etc.' target='_blank' class='buttons'> Professional Development Prior Approval Form</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSdcY-g1mL6ZNR4RG6XleiSmZyEnEXKhRvwzGzxOdrmE7gifnw/viewform' title='Request ACSI CEUs by awarded to you for completion of an existing CEU course.' target='_blank' class='buttons'> Request CEU credits</a>
<a href='https://docs.google.com/forms/d/e/1FAIpQLSddr1ZeyOmmllKXxG8-lvwmCH-wMpEhOwPDGEjTvxJ-BknXOw/viewform' title='Submit a webinar, conference, or Bible study to determine if ACSI CEUs can be granted. Please fill out the fields on this page.' target='_blank' class='buttons'> Request New CEU course</a>