如何集中DINAMIC元素

我想在DIV（.swat容器），但沒有任何工程集中顏色（.attr圖像容器），所以，PLZ，任何人可以幫助我嗎？

我已經tryed把margin：0px auto;在很多地方ehuehu

我的HTML：

<dd class="last"> 
<div class="input-box"> 
    <div class="settings-swatch-container"> 
     <div class="swat-container"> 
      <div class="attr-image-container"> 
       <div class="attr-image" alt="Amarelo" title="Amarelo" style="background-color:#FFF700;"></div> 
      </div> 
      <div class="attr-image-container"> 
       <div class="attr-image" alt="Azul Escuro" title="Azul Escuro" style="background-color:#005EFF;"></div> 
      </div> 
      <div class="attr-image-container"> 
       <div class="attr-image" alt="Verde" title="Verde" style="background-color:#4DFF29;"></div> 
      </div> 
     </div> 
    </div> 
</div>

Mycss

.swat-container{ 
    width:100%; 
    height:100%; 
    margin:auto; 
} 

.attr-image 
{ 
    width: 30px; 
    height: 30px; 
    padding: 1px; 
    margin-right: 5px; 
    cursor:pointer; 
    border: 2px solid #00BFFF; 
} 

.main-swatch-container 
{ 
    width: 100%; 
    clear: both; 
    margin:auto; 
} 

.attr-image-container 
{ 
    float:left; 
    position:relative; 
    text-align: center; 
}

來源

2016-08-30 Plim

使用柔性...

dd { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.swat-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.attr-image { 
 
    width: 30px; 
 
    height: 30px; 
 
    padding: 1px; 
 
    margin-right: 5px; 
 
    cursor: pointer; 
 
    border: 2px solid #00BFFF; 
 
} 
 
.main-swatch-container { 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 
.attr-image-container { 
 
    position: relative; 
 
    text-align: center; 
 
}

<dd class="last"> 
 
    <div class="input-box"> 
 
    <div class="settings-swatch-container"> 
 
     <div class="swat-container"> 
 
     <div class="attr-image-container"> 
 
      <div class="attr-image" alt="Amarelo" title="Amarelo" style="background-color:#FFF700;"></div> 
 
     </div> 
 
     <div class="attr-image-container"> 
 
      <div class="attr-image" alt="Azul Escuro" title="Azul Escuro" style="background-color:#005EFF;"></div> 
 
     </div> 
 
     <div class="attr-image-container"> 
 
      <div class="attr-image" alt="Verde" title="Verde" style="background-color:#4DFF29;"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</dd>

來源

2016-08-30 20:16:39

如何集中DINAMIC元素

回答

相關問題