Как централизовать динамические элементы

Question

Как централизовать динамические элементы

Я пытаюсь централизовать цвета (.attr-image-container) на div(.swat-container), но ничего не работает, так что, плз, кто-нибудь может мне помочь?

я попытался поставить поле:0px авто; во многих местах

Мой 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;
}

0

css centralized

Источник

user6069522 30 авг '16 в 20:09

1 ответ

Решение

Другие вопросы по тегам css centralized

user6641198 30 авг '16 в 20:16 2016-08-30 20:16 · Accepted Answer · 2016-08-30 20:16

Используйте гибкий...

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>