I'm trying to centralize colors (.attr-image-container) on div(.swat-container) but nothing works, so please can anybody help me?
i have tried putting margin:0px auto; in many places
My 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;
}
Use a flex...
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.