CODEWITHSUNDEEP
htmlcss
Fjott
Fjott

Reputation: 1137

CSS horizontaly center li in ul

I have this ul containing four li. I want the li to be centered inside the ul, especially for responsive purpose. I have added some media queries, but this does not center the li in the ul.

@media only screen and (max-width : 589px) {

  #gallery li {float:left; display:inline-block; margin: 0 auto; margin-bottom: 40px;}

}

@media only screen and (min-width : 590px) {

  #gallery li {float:left; margin: 20px;}

}

Upvotes: 0

Views: 81

Answers (3)

Piou
Piou

Reputation: 1066

CSS Flexbox allows you to do that out of the box:

#gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
}

#gallery li {
  margin: 20px;
  padding:10px 10px 25px 10px;
  /*background: #f7f6f5 url(img/pattern-tile.png);*/
  background: #F1EADD;
  
  /*box shadows - 2 of them!! */
  -moz-box-shadow: inset 0 0 2px 8px rgba(138,138,138, 0.1), 0 0 5px 5px rgba(0,0,0, 0.3);
  -webkit-box-shadow: inset 0 0 8px 2px rgba(138,138,138, 0.1), 0 0 5px 5px rgba(0,0,0, 0.3);
  box-shadow: inset 0 0 2px 8px rgba(138,138,138, 0.1),0 0 5px 5px rgba(0,0,0, 0.3);

  /* setting the movement */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all  0.3s ease-in-out;
  transition: all 0.3s ease-in-out; 


}

#gallery li img {
  width:200px;
  border: 1px solid #b0a995;
  border: 1px solid rgba(96,96,96,0.2);
}

#gallery li:nth-child(1),
#gallery li:nth-child(4) {
  /* setting the end state */
  -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

#gallery li:nth-child(2) {
  /* setting the end state */
  -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

#gallery li:nth-child(3) {
  /* setting the end state */
  -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    transform: rotate(-1deg);
}


#gallery li:hover {
  /* setting the end state */
  -webkit-transform: scale(1.05) rotate(5deg);
    -moz-transform:scale(1.05) rotate(5deg);
    -o-transform:scale(1.05) rotate(5deg);
    transform:scale(1.05) rotate(5deg);
}


 
#gallery li a:after {
  display: block;
  padding-top: 15px;
  content: attr(title);
  text-align: center;
}
		<ul id="gallery">
			<li><a href="#" title="bubbles 1"><img src="http://www.valhead.com/polaroids/img/elvis.jpg" alt="bubbles"/></a></li>
			<li><a href="#" title="bubbles 2"><img src="http://www.valhead.com/polaroids/img/elevator.jpg" alt="elevator"/></a></li>
			<li><a href="#" title="bubbles 3"><img src="http://www.valhead.com/polaroids/img/peerco.jpg" alt="elvis"/></a></li>
			<li><a href="#" title="bubbles 4"><img src="http://www.valhead.com/polaroids/img/strip.jpg" alt="elvis"/></a></li>
</ul>

Upvotes: 1

jmag
jmag

Reputation: 826

ul{
  border: 1px solid black;
  text-align:center;
  }
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>

Is this what you meant?

Upvotes: 0

Scott
Scott

Reputation: 21882

Get rid of the float if you want to align the element.

#gallery {
    width:100%; 
    margin:2em auto; 
    list-style: none; 
    position:relative; 
    text-align: center; /* <----- added text-align */ }

@media only screen and (max-width : 589px) {

  #gallery li { 
     /* <----- removed float */
    display:inline-block; 
    margin: 0 auto; 
    margin-bottom: 40px;}

}

Updated Fiddle

Upvotes: 2

Related Questions