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

两个潜在的问题：

您正在课程float: left;中设置.value，该img适用于h6和float: none;。将其更改为left: 125px;或完全删除此行。
设置img会使h6和position: relative; 125px远离其原始呈现位置，因为您已定义{{1}}。这是一件非常奇怪的事情，很可能不会产生居中的图像/文字。除非这是有意的，否则将其删除。

Answer 2

    .row {
    background-color: #ccc;
    overflow: hidden;
    padding: 20px  0px;
}
.row-mid {
    width: 900px;
    margin: auto;
}
.blocks {
    width: 260px;
    padding: 0px 20px;
    text-align: center;
    float: left;
}
.blocks img {
    width: 100px;
}

<div class="row">
    <div class="row-mid">
        <div class="blocks">
            <img src="http://40.media.tumblr.com/32995f9d7829479a987558e11dde13d0/tumblr_nus0pe0fe11r7m6voo1_1280.png" alt=""/>
            <h4>Some Title</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="blocks">
            <img src="http://40.media.tumblr.com/32995f9d7829479a987558e11dde13d0/tumblr_nus0pe0fe11r7m6voo1_1280.png" alt=""/>
            <h4>Some Title</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="blocks">
            <img src="http://40.media.tumblr.com/32995f9d7829479a987558e11dde13d0/tumblr_nus0pe0fe11r7m6voo1_1280.png" alt=""/>
            <h4>Some Title</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
    </div>
</div>

请查看此http://jsfiddle.net/jayeshpp/477qacwd/

Answer 3

在关闭div之前，只需在启动div之前放置<center>并</center>，如下所示：

<center>
    <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>
</center>

我还为您创建了CodePen和JsFiddle。

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

3 个答案: