如何将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. 你在其中被应用到img和h6类.value设置float: left;。将其更改为float: none;或完全删除此行。
2. 设置left: 125px;将定位img和h6 125px远离原先呈现的位置，因为您已定义position: relative;。这是一件非常奇怪的事情，很可能不会导致图像/文字居中。除非这种效果是故意的，否则将其删除。

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

只要把<center>关闭格，这样以后开始div和</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给你。