treehouse : what would you like to learn today?
Web Design Web Development iOS Development

center img horizontally

  • I need to center my images in this slideshow but I don't want to rely on knowing the image size. I have tried the
    	display: block;
    margin-left: auto;
    margin-right: auto
    method but it isn't working for some reason. I'm either missing something silly or the slideshow is causing a problem. Thanks in advance for the help.

    Relevant HTML:
    <div class=\"slideshow\">
    <img class=\"centerpic\" src=\"./images/slideshow/01.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/02.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/03.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/04.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/05.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/06.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/07.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/08.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/09.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/10.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/11.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/12.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/13.jpg\">
    <img class=\"centerpic\" src=\"./images/slideshow/14.jpg\">
    </div>

    Relevant CSS:
    /*Slideshow*/

    .slideshow {
    height: 370px;
    width: 370px;
    text-align: center;

    }

    img.cernterpic{
    display: block;
    margin-left: auto;
    margin-right: auto
    }

    link to page:
    http://kyam.ca/#2
    Link to stylesheet:
    http://kyam.ca/stylesheets/coda-slider-2.0.css
  • Typo!!
    In the HTML you are calling
    <img class="centerpic"
    In the CSS you have called it
    img.cernterpic{