如何使div拼贴和其中的文字正确对齐？

Question

（注意：在运行示例时，请使用Full Page整Full Page功能查看所有差异）

我有一些div格式为图块。 我的目标是：

• 瓷砖排列在一起
• 所有文字均在图块内，居中
• 白色说明文字位于底部，位于底部，并且不会在边框外溢出
• 红利：白色描述文字周围有填充物（这样它就不会太靠近图块的边界）。

问题：

目前，我不确定如何将瓷砖对齐或导致瓷砖未对齐的原因。

对于使用填充时的“奖励”，仅填充左侧，而右侧通常超出边框。 我不知道为什么。

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

 .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>标记中。

Answer 2

您的.tile_description绝对定位，因此其宽度是其内容的宽度，而不是其父项的宽度。 移开位置，说明文字应居中。
为了使说明适合图块，您必须给它更多的空间，在我的示例中，我删除了h1的上边距
tile 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> 

Answer 3

好吧，第一件事。 我建议您在开始之前考虑重置CSS。 您遇到的一些间距问题是由于浏览器的默认页边距，填充等引起的，如果先将其全部清零，您将对所有内容具有更多的控制权。 您最终将不得不为标签明确设置很多值，但从长远来看，它将为您省去很多麻烦。 只需在此处包括代码，无论是将其包含在css文件中还是将其放在单独的文件中并链接到它： http : //meyerweb.com/eric/tools/css/reset/

至于瓷砖的定位，您无需在任何物体上使用垂直对齐或定位。 将float：left; 在你的瓷砖上。 如果屏幕上有足够的空间来放置它们，这将导致它们彼此“漂浮”并很好地对齐（否则它们将开始下拉至新的行）。

这是一个垃圾箱，显示我在说什么。 我包括了重置CSS规则，设置了一些简单的标记规则，然后在底部设置了样式。 您可能需要调整输出面板的大小，以使所有三个都在同一行上。 希望这可以帮助！ http://jsbin.com/nufeyu/1/edit?css,output

Answer 4

 .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>