（注意：运行示例时，请使用Full Page功能查看所有差异）
我有一些格式为tile的div。我的目标是：
问题：
目前，我不确定如何将瓷砖排成一行或者导致它们未对齐的原因。
对于＆＃34;奖金＆＃34;当我使用填充时，只有左侧是填充的，但右侧通常会越过边框。我无法弄清楚原因。
如何正确对齐瓷砖和文字？
.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>
答案 0 :(得分：2)
应该纠正一些事情：
在该示例中，您不应多次使用<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>标记。
答案 1 :(得分：1)
您的.tile_description绝对定位，因此其宽度是其内容的宽度，而不是其父级的宽度。删除定位，描述文本应居中
为了使图块中的描述符合要求，您必须为其提供更多空间，在我的示例中，我删除了h1的上边距。
tiles div已经有了填充，因此描述并不需要任何填充。
.tile {
overflow: hidden;
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 h1{
margin-top:0;
}
.tile_description {
color: white;
font-size: 1.3em;
font-style: italic;
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>
答案 2 :(得分：1)
好的，首先要做的事情。我建议你在开始之前考虑重置你的CSS。您遇到的一些间距问题是由于浏览器的默认边距，填充等，如果您先将所有内容归零，您可以对所有内容进行更多控制。您最终必须为您的代码明确设置很多值，但从长远来看，它会为您节省很多麻烦。只需在此处包含代码，无论您是将其包含在css文件中还是将其放在单独的文件中并链接到它：http://meyerweb.com/eric/tools/css/reset/
至于瓷砖的位置，您不需要在任何东西上使用垂直对齐或定位。放浮动：左;在你的瓷砖上。这将使他们“漂浮”＃34;如果有足够的空间让他们在屏幕上这样做，那么彼此相邻并排列得非常好（否则他们会开始下降到新的行）。
这是一个展示我所谈论内容的垃圾箱。我包含了重置css规则，设置了一些简单的标记规则，然后在底部设置了样式。您可能需要调整输出面板的大小以使所有三个在同一行上。希望这可以帮助！ http://jsbin.com/nufeyu/1/edit?css,output
答案 3 :(得分：0)
.tile {
width: 300px;
height: 160px;
border: 3px solid black;
border-radius: 25px;
padding: 14px;
color: black;
display: inline-block;
margin: 10px 40px 10px 20px;
position: relative;
text-align: center;
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;
box-sizing: border-box;
}
.tile_description {
width: 100%;
color: white;
font-size: 1.3em;
font-style: italic;
margin: 0;
position: absolute;
left: 0;
bottom: 0;
padding: 14px;
text-align: center;
box-sizing: border-box;
}<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>