0

Всем привет , не могу понять почему не работает margin:auto;

Есть родительский блок , внутри него 3 блока , нужно сделать так чтобы эти 3 блока всегда выравнивались по центру родительского вне зависимости от разрешения экрана , резину не предлагать внутри маленькие изображения , получается не очень красиво при растягивании. Спасибо вот код.

    .parent {
        display:block;
        float:left;
        min-width:300px;
        width:27%;
        height:75px;
        background:red;
        margin:3% 0 0 0;
    }


.child1{
    display:block;
    float:left;
    width:70px;
    height:100%;
    background:url(fb.png) no-repeat;
    margin:auto;


}

.child2{
    display:block;
    float:left;
    width:70px;
    height:100%;
    background:url(tw.png) no-repeat;
    margin:auto;

}

.child3{
    display:block;
    float:left;
    width:70px;
    height:100%;
    background:url(inst.png) no-repeat;
    margin:auto;

}

              <div class="soccontainer">
                      <a href="">
    <div class="child1"></div></a>
                      <a href="">
<div class="chil2"></div></a>
                      <a href="">
<div class="child3"></div></a>
            </div>
3
  • 1
    min-width:300px; width:27%; : float:left; margin:auto;??! Вы бы сначало почитали что-нибудь о верстке вообще
    – SVE
    29 сен 2016 в 12:12
  • Код в вопросе приведи в порядок и помести в сниппет.
    – Qwertiy
    29 сен 2016 в 14:45
  • там лишний код был , уже поправил , я знаю верстку но когда и back - end и front-end разрабатываешь сам , некоторые правила могут вылетать из головы.
    – hovdev
    29 сен 2016 в 16:43

3 ответа 3

1

я тоже свои пять копеек вставлю

в общем если добавить ещё один блок-обёртку то получается если не ошибаюсь то что вам нужно

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.container {
  width: 100%;
  height: 150px;
  margin: 20px auto;
  display: table;
  border: 1px solid;
  box-sizing: border-box;
}
.container a {
  display: table-cell;
  width: 1000px;
  text-align: center;
  height: 150px;
  vertical-align: middle;
}
.container a:first-child {
  background: red;
}
.container a:nth-child(2) {
  background: green;
}
.container a:nth-child(3) {
  background: yellow;
}
.img_wrapper {
  width: 80%;
  margin: auto;
}
<div class="container">
  <div class="img_wrapper">
    <a href="#">
      <div class="child1">1</div>
    </a>
    <a href="#">
      <div class="chil2">2</div>
    </a>
    <a href="#">
      <div class="child3">3</div>
    </a>
  </div>
</div>

1

Можно без обертки обойтись.

.soccontainer {
    display:flex;
    min-width:300px;
    width:27%;
    height:75px;
    background:green;
    margin:3% 0 0 0;
} 
.soccontainer a {
   width: 75px;
   background: red;
   border: 1px solid black;
}
.soccontainer a:first-child {margin-left: auto}
.soccontainer a:last-child {margin-right: auto}
 <div class="soccontainer">
     <a href="">
        <div class="child1"></div></a>
     <a href="">
        <div class="chil2"></div></a>
     <a >
        <div class="child3"></div></a>
 </div>

0

Примерно так, но я не стал бы добавлять лишние div в a

.soccontainer {
  display: block;
  float: left;
  min-width: 300px;
  width: 27%;
  height: 75px;
  background: red;
  margin: 3% 0 0 0;
  text-align: center
}

.soccontainer > a {
  display: inline-block;
  background: green;
  height: 100%;
}

.soccontainer > a > div {
  width: 70px;
  height: 100%;
}

.child1 {
  background: url(fb.png) no-repeat;
}

.child2 {
  background: url(tw.png) no-repeat;
}

.child3 {
  background: url(inst.png) no-repeat;
}
<div class="soccontainer">
  <a href="#">
    <div class="child1">1</div>
  </a>
  <a href="#">
    <div class="chil2">2</div>
  </a>
  <a href="#">
    <div class="child3">3</div>
  </a>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.