Question

我正在尝试并排放置两个div（红色框），并且每个红色框内应该是一个带边框的链接。一个链接在两行上，而第二个链接在一行上。链接应位于每个框的中心（水平和垂直），两个框也应完全对齐。

我的代码如下。我不得不将链接设置为“display：table-cell;”保持两个盒子对齐。如果你有其他解决方案，我正在听^^。

* {
margin: 0;
padding: 0;
}

#marketing-button, #prints-button {
	background-color: red;
	text-align: center;
	width: 10em;
	height: 10em;
	display: inline-block;
}

#marketing-link, #prints-link {
	color: white;
	vertical-align: middle;
	display: table-cell;
	float: none;
	font-size: 1em;
	border: yellow solid 2px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: .2em;
}

<body>
		<div id="container">
			<div id="marketing-button">
				<a id="marketing-link" href="#">Digital <br />marketing</a>
			</div>
			<div id="prints-button">
				<a id="prints-link" href="#">Prints</a>
			</div>
		</div>
	</body>

谢谢你们！

Answer 1

好的，我找到了解决方案。每个链接应设置为显示为内联块，并应包含在显示为表格单元格的div中。这允许垂直居中链接。

表格单元格本身应包含在显示为内联块的div中。这允许红色框对齐并在它们之间留出空格。

以下是最终代码：

* {
margin: 0;
padding: 0;
}

.container {
	display: inline-block;
}

#marketing-button, #prints-button {
	background-color: red;
	text-align: center;
	width: 10em;
	height: 10em;
	display: table-cell;
	vertical-align: middle;
	margin-right: 20px;
	
}

#marketing-link, #prints-link {
	color: white;
	display: inline-block;
	float: none;
	font-size: 1em;
	border: yellow solid 2px;
	text-align: center;
	padding: .2em;
}

<body>
	
		<div class="container">
			<div id="marketing-button">
				<a id="marketing-link" href="#">Digital <br />marketing</a>
			</div>
		</div>
		<div class="container">
			<div id="prints-button">
				<a id="prints-link" href="#">Prints</a>
			</div>		
		</div>
	
</body>

将两个并排的div与每个div中心的可变长度链接对齐

1 个答案: