CODEWITHSUNDEEP
htmlcss
CoopDaddio
CoopDaddio

Reputation: 637

Unable to horizontally center my list (containing an image)

I have two lists that's location I would like to move as the screen size gets smaller. When the screen reaches 327px in length, I would like the "headlogo" to be centered on the screen, and everything else exactly as it is... how do I do this?

@charset "utf-8";

/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background-color: #DDDCDC;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding: 10px;
}
.secondlist {
  margin-top: 30px;
}
#headlogo {
  width: 80px;
  margin-left: 10px;
  margin-top: 10px;
}
.firstlist {
  position: relative;
  float: left;
}
.secondlist {
  position: absolute;
  right: 0;
  margin-right: 50px;
  margin-top: 50px;
  z-index: 2;
}
li#about {
  width: 5px;
}
@media only screen and (max-width: 610px) {
  .firstlist {
    position: relative;
    float: left;
  }
  .secondlist {
    position: relative;
    right: 0;
    margin-right: 50px;
    margin-top: 50px;
    z-index: 2;
    text-align: center;
  }
  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  li.listli {
    line-height: 30px;
  }
  #headlogo {
    width: 80px;
    margin-left: 10px;
    margin-top: -22px;
  }
}
@media only screen and (max-width: 424px) {
  #headlogo {
    margin-top: -3px;
  }
}
@media only screen and (max-width: 394px) {
  #headlogo {
    margin-top: 7.5px;
  }
}
@media only screen and (max-width: 327px) {
  #centerme {
    display: inline-block;
    position: relative;
    top: 30px;
  }
  .firstlist {
    float: none;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  li.listli {
    position: relative;
    top: -10px;
  }
}
<div id="centerme">
  <ul class="firstlist">
    <a class="alist" href="http://www.coopertimewell.com">
      <li class="listl" id="image">
        <img id="headlogo" src="images/logotestme.png" />
      </li>
    </a>
  </ul>
</div>
<ul class="secondlist">
  <a class="alist" href="#">
    <li class="listli" id="home"><strong>HOME</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/about"><li class = "listli" id = "about">ABOUT ME</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/work"><li class = "listli" id = "work">PORTFOLIO</li></a>
<a class = "alist" href = "http://www.coopertimewell.com/contact"><li class = "listli" id = "contact">CONTACT</li></a>
</ul>

Upvotes: 0

Views: 34

Answers (3)

aron van broekhuysen
aron van broekhuysen

Reputation: 1

You can do

@media (max-width: 327){
   #headlogo{
    //with your code her//
   }
}

Or you can use a new css file with media added

<link rel="stylesheet" media="screen and (max-width: 327px)" href="small.css/>

With this line you can add a complete new css if your screen will be 327px or smaller.

Upvotes: 0

Wiljan van Dalen
Wiljan van Dalen

Reputation: 38

If you would only center it horizontally u have to edit #center in the 'max-width: 327px' query to the following:

#centerme {
    display: block;
    position: relative;
    top: 30px;
    width: 100%;
    text-align: center;
  }

I made the #center div a 100% width and set the text-align to center, which affects the image also. So this way you can center the image horizontally.

Or if you would center it horizontally and vertically you can use:

#centerme {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    width: 100%;
    text-align: center;
}

With the same code from above I added

top: 50%;
transform: translateY(50%);

to center it horizontally.

Goodluck!

Upvotes: 2

Pixelomo
Pixelomo

Reputation: 6737

This should centre it below 327px;

@media (max-width: 327px){
    #headlogo{
         display: block;
         margin: 0 auto
    }
}

Check this out for more info

Upvotes: 0

Related Questions