html - 如何将div html中的所有内容设置为居中位置

Question

我在将 html 中的内容居中时遇到问题。如何使 html 内容(图片、文本等)居中？如何对齐内容(位置中心) this picture ？

在 html 中，我有从数据库获取内容的 foreach 循环:

<div id="values" >
            <div >
                @foreach (var parameter in @Model.Values)
                {
                    <img class="value" src="@parameter.Image" />
                }
            </div>
            <div >
                @foreach (var parameter in @Model.Values)
                {
                    <p class="value2">@parameter.Name</p>
                }
            </div>
            <div >
                @foreach (var parameter in @Model.Values)
                {
                    <h6 class="value">@parameter.Description</h6>
                }
            </div>
        </div>

和CSS:

#values {
    position: relative;
    align-content:center;
    text-align: center;
    vertical-align: middle;
    align-items: center;
}

.value {
    position: relative;
    text-align: center;
    align-items: center;
    align-content: center;
    float: left;
    vertical-align: middle;
    font-family: 'Lato', calibri;
    bottom: 275px;
    left: 125px;
    width: 150px;
    margin-right: 245px;
    margin-left: 100px;
    margin-bottom: 2px;
    padding-bottom: 10px;
    color: white;
    font-weight: 700;
    display: inline-block;
}

但是我没有得到像图片那样的结果。其实怎么能自动调整图片中的内容...

Answer 1

两个潜在的问题:

1. 您正在 .value 类中设置 float: left;，它应用于 img 和 h6。将其更改为 float: none; 或完全删除此行。
2. 设置 left: 125px; 将使 img 和 h6 远离它们最初呈现的位置 125px，因为您定义了 position:relative；。这是一件非常奇怪的事情，很可能不会导致居中的图像/文本。除非这种影响是有意为之，否则请将其移除。