How to center an image in responsive layout?

S

Sayyflyy2015-09-25 09:41:42

css

Sayyflyy, 2015-09-25 09:41:42

<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>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

S

Sayyflyy, 2015-09-25
@Sayyflyy

#logo{
text-align: center;
} did not help

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>

V

Vladislav Kopylov, 2015-09-25
@kopylov_vlad

Try

#logo{
text-align: center;
}

Y

yadomot, 2015-09-25
@yadomot

/* CSS */
.img-responsive { margin: 0 auto; }

<img class="img-responsive" src="https://habrastorage.org/files/d50/be2/1fa/d50be21fac704b858c5538f13cc7391b.png" alt="image"/>