Как заставить эти элементы эффективно центрироваться правильно и быстро?

0

Я чувствую, что решение, которое я использую, действительно хэшировано вместе. Дайте мне знать, что я могу сделать лучше, потому что я застрял на этом, не перестраивая его с нуля:

  <div id="content">
      <div class="blocking"
        <td><a href="https://github.com/kfrncs"><img src="img/github.png" class="social" id="github"></a></td>
        <td><a href="https://twitter.com/kfrncs"><img src="img/twitter.png" class="social" id="twitter"></a></td>
      </div>
      <div class="blocking">
        <td><a href="mailto:[email protected]"><img src="img/gmail.png" class="social" id="gmail"></a></td>
        <td><a href="skype:kennethpatrickfrancis?add"><img src="img/skype.png" class="social middle" id="skype"></a></td>
      </div>
      <div class="blocking">
        <td><a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="img/stackoverflow.png" class="social" id="stackoverflow"></a></td>
      </div>

CSS:

@media only screen and (min-width: 320px) and (max-width: 768px)
{
    .blocking {
        display: block;
        padding: 2vh 25vw 0 30vw;
        margin-left: auto;
        margin-right: auto;
    }
    #github {
        margin-top: 5vh;
    }
    #stackoverflow {
        margin-bottom: 5vh;
    }
    .titleres {
        display: block;
    }
}



@media only screen and (min-width: 768px) and (max-width: 1024px)
{
    .blocking {
        display: block;
        padding: 5vh 20vw 0 24vw;
    }
    #stackoverflow {
        margin-left: 9vw;
    }
}

@media only screen and (min-width: 1024px)
{   
    .blocking {
        display: inline;
    }
}

Я хочу, чтобы все элементы оставались в центре внимания, чтобы иметь пять в ряд на полноразмерном мониторе, но затем слайд-шоу вместе, когда экран меньше. Я не могу понять, как заставить их оставаться в центре на экранах размером с телефон. Любые примеры совершенно разных способов обработки того, что я делаю, будут оценены - даже если конечный результат отличается. Но если есть способ правильно настроить то, что я пытаюсь сделать, это тоже будет оценено.

EDIT: http://kennethfrancis.com

  • 4
    Зачем использовать <td> внутри div, без таблицы ?! Вы также забыли > после <div class="blocking" .
  • 0
    Иконки кажутся мне хорошо центрированными даже на самых маленьких разрешениях
Теги:
responsive-design

3 ответа

1
Лучший ответ

Вам нужно очистить свой HTML, у меня есть некоторые проблемы в логике и синтаксисе, я думаю. это простой пример того, что вы можете сделать:

jsFiddle

HTML

<div id="content">
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
</div>

CSS

#content{
    width:80vw;
    text-align:center;
}
a{
    display:inline-block;
}
  • 0
    Это то, что я искал. Спасибо
1

Я не вижу никаких проблем с центрированием текущей страницы. Я бы рекомендовал использовать Bootstrap для создания вашего сайта. Он предоставит вам те же самые гибкие функции, которые вы хотите реализовать, не требуя, чтобы вы написали всю надпись CSS.

Вот пример образца HTML-кода, который вы опубликовали на Bootstrap 3 без всего CSS, который вы написали:

<div id="content" class = "row">
      <div class = "col-md-2 col-sm-4">
        <a href="https://github.com/kfrncs"><img src="http://kennethfrancis.com/img/github.png" class="social" id="github"></a>
          </div>
          <div class = "col-md-2 col-sm-4">
            <a href="https://twitter.com/kfrncs"><img src="http://kennethfrancis.com/img/twitter.png" class="social" id="twitter"></a>
      </div>
      <div class = "col-md-2 col-sm-4">
        <a href="mailto:[email protected]"><img src="http://kennethfrancis.com/img/gmail.png" class="social" id="gmail"></a>
          </div>
      <div class = "col-md-2 col-sm-4">
        <a href="skype:kennethpatrickfrancis?add"><img src="http://kennethfrancis.com/img/skype.png" class="social middle" id="skype"></a>
      </div>
      <div class = "col-md-2 col-sm-4">
        <a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="http://kennethfrancis.com/img/stackoverflow.png" class="social" id="stackoverflow"></a>
      </div>

В этом примере переместите левую границу на нижнем правом экране, чтобы увидеть стопку значков и де-стоп на основе ширины документа

0

чувак, в первую очередь ваш html очень плохой, вы НЕ МОЖЕТЕ разместить внутри ДОЛЖНЫ быть в течение секунды, у вас есть открытый div, тот, у кого есть класс блокировки, не знаю, скопировали ли вы его неправильно, но все равно проверьте его.

в-третьих, если вы просто хотите, чтобы 5 строк с центрированным контентом использовали только 5 div, и каждый div получает атрибуты css на уровне 100% и текст-выравнивание css и что это

Ещё вопросы

Сообщество Overcoder
Наверх
Меню