Задать вопрос
@Sayyflyy
html

Как сделать картинку по центру при адаптивной вертске?

<div class="row">
                     <div class="col-md-4 col-xs-4"></div>
                     <div class="col-md-4 col-xs-4 col-sm-4" id="logo"><img src="img/LogoDK2.png" class="img-responsive"></div>
                     <div class="col-md-4 col-xs-4 col-sm-4"></div>
                 </div>

d50be21fac704b858c5538f13cc7391b.png
  • Вопрос задан
  • 1280 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@Sayyflyy Автор вопроса
#logo{
text-align: center;
} не помогло
649b59a2b3594ba1bf95e8752a3dc494.png
body
html {
    width: 100%;
    height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Circe;
    font-weight: 700;
}

.intro-header {
    background-size: cover;
    background: linear-gradient(to right, #ef564b, #011049);
    text-align: center;
    color: white;
    background-size: cover;
}

#logo { 
    padding-top: 8%;
    max-width: 100%;     
}

.intro-message {
    position: relative;
    padding-top: 3%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    margin: 0;
    font-size: 4em;
}
.intro-message > h3 {
    margin: 0;
    font-size: 5em;
}
.bottom1 {
    width: 271px;
    height: 92px;
    border: 5px #c75b25 solid;
    border-radius: 10px;
    
}


@media(max-width:767px) {
    .intro-message > h1 {
        font-size: 2em;   
    }   
     .intro-message > h2 {
        font-size: 1em;    
    } 
      .intro-message > h3 {
        font-size: 3em;
     } 
}

<body>
   
    <!-- Header -->
    <div class="intro-header">
        <div class="container">
           
           <div class="row">
               <div class="col-lg-12">
                 <div class="row">
                     <div class="col-md-4 col-xs-4"></div>
                     <div class="col-md-4 col-xs-4 col-sm-4" id="logo"><img src="img/LogoDK2.png" class="img-responsive" alt="image"></div>
                     <div class="col-md-4 col-xs-4 col-sm-4"></div>
                 </div>
                      <div class="intro-message">
                          <h1>Ваша правая рука</h1>
                          <h2>ПРОДАЖА ПРОГРАММЫ ДЛЯ АВТОМАТИЗАЦИИ<br>АТТРАКЦИОНА НА БАЗЕ</h2>
                          <h3>OCULUS RIFT</h3>
                        <div class="bottom1"><a href="#">Попробовать<br>бесплатно</a></div>
                                                         
                                                          

                   

    
    
    
    
                   </div>
               </div>
            </div>
        </div>
    </div>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
kopylov_vlad
@kopylov_vlad
Попробуй
#logo{
text-align: center;
}
Ответ написан
Комментировать
Комментировать
@yadomot
/* CSS */
.img-responsive { margin: 0 auto; }

<img class="img-responsive" src="https://habrastorage.org/files/d50/be2/1fa/d50be21fac704b858c5538f13cc7391b.png" alt="image"/>
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Парсер-бот
22 дек. 2024, в 20:12
10000 руб./за проект
Ещё заказы