CODEWITHSUNDEEP
htmlcssmedia-queries
GiorgiPera
GiorgiPera

Reputation: 33

How to put logo in center using css

Before i start, I would like to apologize for my bad English.

I want to put website logo in center using css after Media Query (max-width: 1100px)

there is my css & html

.logo { 
  width: auto;
  height: auto;
  float:left;
  padding:22.5px 0px 0px 10px;
}
<div class="logo">
  <img src="http://s3.amazonaws.com/libapps/accounts/27060/images/example.png" alt="example" class="logo"/>
</div>

please help me :( :D

Upvotes: 1

Views: 26915

Answers (6)

iorgu
iorgu

Reputation: 3009

Because my previous answer was based on a site that is no longer available, my updated code is the following:

@media (max-width: 1100px) {
  .logo img {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
  }
}
<div class="logo">
  <img src="http://s3.amazonaws.com/libapps/accounts/27060/images/example.png" alt="example" />
</div>

Upvotes: 1

Millhorn
Millhorn

Reputation: 3166

My suggestion is based on flexbox. I've put it into a Codepen as well, so you can play with the screen size and see how the collapse happens when the screen exceeds the 1100px screen size.

View Codepen

.logo img {
  width: 100px;
  height: auto;
}

@media (max-width: 1100px) {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .logo img {
    width: 50%;
    height: auto;
  }
}
<div class="logo">
  <img src="http://s3.amazonaws.com/libapps/accounts/27060/images/example.png" alt="example" class="logo"/>
</div>

Upvotes: 0

Asimov1973
Asimov1973

Reputation: 11

with witdth 100% it will never be centered, width must be 50%

Upvotes: 1

Chen Zissu
Chen Zissu

Reputation: 73

text-align:center will work just fine if that's the only element that you want to center/text that you want to center. other oprions will be to add to the element . btw if you want if also responsive you may give it width:100%; height:auto;

Upvotes: 0

R.H.Prem
R.H.Prem

Reputation: 165

Hope this should work as your demand.

@media(max-width: 1100px){ .logo { width:auto; height:auto; float:left; margin: 0 auto 0 auto; padding:22.5px 0 0 10px; } .logo img { display: inline-block; } }

Upvotes: 0

ZeroWorks
ZeroWorks

Reputation: 1638

Maybe this could help you, just set img to act as a character (inline-block) and align center.

.logo { 
  width: auto;
  height: auto;
  text-align:center;
}

.logo img {
  display:inline-block;
} 
<div class="logo">
  <img src="http://s3.amazonaws.com/libapps/accounts/27060/images/example.png" alt="example" class="logo"/>
</div>

Hope it helps!

Upvotes: 3

Related Questions