html - 如何使 div tiles 和其中的文本正确对齐？

Question

(注意:运行示例时，使用Full Page 功能查看所有差异)

我有一些 div 格式为图 block 。我的目标是:

• 相互排成一行的瓷砖
• 所有文本都在图 block 内，居中
• 位于底部的白色描述文本位于底部，并且不会溢出到边框之外
• 奖励:白色描述文本周围有填充(这样它就不会太靠近图 block 的边界)。

问题:

目前，我不确定如何将图 block 排成一行或导致它们未对齐的原因。

对于“奖励”，当我使用填充时，只有左侧被填充，但右侧通常超出边界。我不明白为什么。

如何正确对齐图 block 和文本？

.tile {
	border-style: solid;
	padding: 14px;
	border-width: 3px;
	color: black;
	display: inline-block;
	height: 130px;
	list-style-type: none;
	margin: 10px 40px 10px 20px;
	position: relative;
	text-align: center;
	width: 270px;
	border-radius: 25px;
	box-shadow: 10px 10px 5px #888888;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF));
	background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%);
}

.tile_description {
	color: white;
	font-size: 1.3em;
	font-style: italics;
	position: absolute;
	text-align: center;
}

<fieldset>
	<legend>
		<b>Tiles</b>
	</legend>
	<div class="tile">
		<h1>Assembly</h1>
		<p class="tile_description">Manage Product Assembly and Maintenance</p>
	</div>
	<div class="tile">
		<h1>Design</h1>
		<p class="tile_description">Manage Product Designs</p>
	</div>
	<div class="tile">
		<h1>Document Generator</h1>
		<p class="tile_description">Generate documents from recorded data</p>
	</div>
</fieldset>

Answer 1

有几点需要更正:

• 你不应该使用 <h1>在该示例中多次标记。

• 使用 vertical-align: top让积木很好地排成一排

• 位置absolute在那里用起来不好。

更新演示 - http://jsfiddle.net/xm7qpkku/ (变化很小)

HTML

<fieldset>
    <legend>
        <b>Tiles</b>
    </legend>
    <div class="tile">
        <h2>Assembly</h2>
        <p class="tile_description">Manage Product Assembly and Maintenance</p>
    </div>
    <div class="tile">
        <h2>Design</h2>
        <p class="tile_description">Manage Product Designs</p>
    </div>
    <div class="tile">
        <h2>Document Generator</h2>
        <p class="tile_description">Generate documents from recorded data</p>
    </div>
</fieldset>

CSS

.tile {
    border-style: solid;
    padding: 14px;
    border-width: 3px;
    color: black;
    display: inline-block;
    height: 130px;
    list-style-type: none;
    margin: 10px 40px 10px 20px;
    position: relative;
    text-align: center;
    width: 270px;
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888888;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF));
    background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%);
    vertical-align: top;
    text-align: center;
}

.tile_description {
    color: white;
    font-size: 1.3em;
    font-style: italic;
}

您可以将一些填充添加到 <p>如果需要，请标记。