Ячейка таблицы HTML / CSS выравнивает только кнопку внизу;

Question

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

Что я хочу, это ниже: ! Финальная таблица ячеек 1

На данный момент кнопки / текст ссылки находятся сразу после изображений ...

.greyCompareTable {
    padding: 20px 0px 20px 0px;
    background-color: #f5f5f5;
    margin-left: -20px;
    margin-right: -20px;
    display: table;
    width: 100%;
    border-spacing: 20px;
    border-collapse: separate;
    table-layout: fixed;
}

.greyCompareRow {
    display:table-row;
    background-color:green;
}

.greyCompareCell {
    display:table-cell;
    background-color: #fff;
    border: 1px;
    border-style: solid;
    border-radius: 2px;
    border-color: #37b8eb;
    position: relative;
}

<div class="greyCompareTable">
<div class="greyCompareRow">
	<div class="greyCompareCell">
		<h3 style="text-align: center;">
			<span id="Kastein_Bosch_Bartoel">Headline</span>
		</h3>
		<p style="text-align: center;">
			<a href="..." target="_blank" rel="noopener"><img src="..." border="0" class="tie-appear"></a>
			<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
			<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
		</p>
		<p style="text-align: center;">
			<a href="..." target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
				<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
		</p>
	</div>
	<div class="greyCompareCell">
		<h3 style="text-align: center;">
			<span id="Bergland_Bartoel">Headline 2</span>
		</h3>
			<p style="text-align: center;">
				<a href="..." target="_blank" rel="noopener">
				<img src="..." border="0" class="tie-appear"></a>
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				This image is a little bit bigger
			</p>
			<p style="text-align: center;">
				<a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
			</p>
		</div>
		<div class="greyCompareCell">
			<h3 style="text-align: center;">
				<span id="Bergland_Bartoel">Headline 3</span>
			</h3>
			<p style="text-align: center;">
				<a href="..." target="_blank" rel="noopener">
				<img src="..." border="0" class="tie-appear"></a>
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
			</p>
			<p style="text-align: center;">
				<a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
			</p>
		</div>
</div>
</div>

Answer 1

Вот полный код выравнивания гиперссылки внизу и по центру. position: absolute сместит его из своего положения, а bottom: 0; потянет элемент на дно, но этого недостаточно, так как другие элементы расположены неправильно. Добавление width: 100%; + margin:0 auto; приведет к горизонтальному выравниванию ссылки.

Наконец у вас будет следующее:

.shortc-button {
  bottom: 0;
  left: 0;
  width: 100%;
  margin:0 auto ;
  position: absolute;
}

.greyCompareTable {
    padding: 20px 0px 20px 0px;
    background-color: #f5f5f5;
    margin-left: -20px;
    margin-right: -20px;
    display: table;
    width: 100%;
    border-spacing: 20px;
    border-collapse: separate;
    table-layout: fixed;
}

.greyCompareRow {
    display:table-row;
    background-color:green;
}

.greyCompareCell {
    display:table-cell;
    background-color: #fff;
    border: 1px;
    border-style: solid;
    border-radius: 2px;
    border-color: #37b8eb;
    position: relative;
}
.shortc-button {
  bottom: 0;
  left: 0;
  width: 100%;
  margin:0 auto ;
  position: absolute;
}

<div class="greyCompareTable">
<div class="greyCompareRow">
	<div class="greyCompareCell">
		<h3 style="text-align: center;">
			<span id="Kastein_Bosch_Bartoel">Headline</span>
		</h3>
		<p style="text-align: center;">
			<a href="..." target="_blank" rel="noopener"><img src="..." border="0" class="tie-appear"></a>
			<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
			<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
		</p>
		<p style="text-align: center;">
			<a href="..." target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
				<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
		</p>
	</div>
	<div class="greyCompareCell">
		<h3 style="text-align: center;">
			<span id="Bergland_Bartoel">Headline 2</span>
		</h3>
			<p style="text-align: center;">
				<a href="..." target="_blank" rel="noopener">
				<img src="..." border="0" class="tie-appear"></a>
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				This image is a little bit bigger
			</p>
			<p style="text-align: center;">
				<a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
			</p>
		</div>
		<div class="greyCompareCell">
			<h3 style="text-align: center;">
				<span id="Bergland_Bartoel">Headline 3</span>
			</h3>
			<p style="text-align: center;">
				<a href="..." target="_blank" rel="noopener">
				<img src="..." border="0" class="tie-appear"></a>
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
				<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
			</p>
			<p style="text-align: center;">
				<a href="" target="_blank" class="shortc-button medium green ">Jetzt ansehen</a>
			</p>
		</div>
</div>
</div>

Answer 2

Вы можете установить position: absolute; и bottom: 0; на своей кнопке, но не забудьте установить родительский элемент на position:relative, чтобы использовать абсолютное позиционирование и добавить min-height: 300px; в ячейку для небольших изображений.