Переместить логотип в центр справа HTML CSS

-1

У меня есть логотип в правой части страницы. При изменении размера (уменьшение окна) я хочу переместить логотип в центр страницы.Переместить логотип в центр справа HTML CSS

Вот мой CSS

.headerlogo { 
    position: relative; 
    float: right; 
    margin-right: 5%; 
    margin-top: 50px; 
    z-index: 999; 
} 

.getapp-nav-img{ 
    height: 60px; 
     margin: auto; 
}

Вот мой HTML

<div class="headerlogo" style=""> 
        <div class="social-nav"> 
         <a href='#'><img class="getapp-nav-img" src='img/logo.png'/></a> 
        </div> 
      </div>

Его не движется этим. Как я могу это достичь?

источник

2016-05-25 Abhishek

установить медиа-запрос – winresh24

указать точку останова, соответственно можно предложить такую же, используя запрос 'media'. – Shashank

@Abhishek, пожалуйста, проверьте мой ответ на фрагмент и покажите на полной странице и проверьте отзывчивость. – Jainam

Вы можете использовать медиа-запросы, как это:

.headerlogo { 
 
    width: 50px; 
 
    position: relative; 
 
    float: right; 
 
    margin: 50px 5% 0 auto; 
 
    z-index: 999; 
 
} 
 

 
.getapp-nav-img { 
 
    height: 60px; 
 
    margin: auto; 
 
} 
 

 
@media (max-width: 480px) { 
 
    .headerlogo { 
 
    float: none; 
 
    text-align: center; 
 
    margin: 50px auto 0 auto; 
 
    } 
 
}

<div class="headerlogo" style=""> 
 
    <div class="social-nav"> 
 
    <a href='#'><img class="getapp-nav-img" src='https://cdn0.iconfinder.com/data/icons/black-icon-social-media/256/099280-blinklist-logo.png'/></a> 
 
    </div> 
 
</div>

скрипт для более легкого тестирования: https://jsfiddle.net/ajjr3u3n/2/

источник

2016-05-25 08:47:56 thepio

при использовании этого логотипа перемещается влево при изменении размера, а не в центре – Abhishek

@Abhishek Проверьте обновленный ответ и jsfiddle, которые я разместил. –

@ Абхишек, ты уверен? По крайней мере, это работает для меня в скрипке, а также в фрагменте. Не уверен, что есть что-то еще, что мне не хватает из вашего css или html. – thepio

Удалите поплавок и используйте выравнивание по центру, чтобы центрировать img. Вы должны сделать эти изменения в пределах media query так:

@media (max-width: 768px) { 
    .social-nav { 
     text-align: center; 
    } 
    .headerlogo { 
     float: none; 
    } 
}

Ссылка на jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/108/

источник

2016-05-25 08:46:11

Переместить логотип в центр справа HTML CSS

ответ

Смежные вопросы