如何将此HTML / CSS幻灯片放在中心？

Question

我正在尝试将JavaScript幻灯片和“幻灯片标题”集中在图像左侧。您可以在下方看到我的网站左侧和右侧是我想要的幻灯片放映方式。

我尝试将text-align: center;添加到我的CSS但没有任何变化。

HTML

    <div class="container">
        <div class="header">
            <h1 class="text-muted">Slideshow</h1>
        </div>

        <div id="slider">
            <ul class="slides">
                <li class="slide slide1">slide1</li>
                <li class="slide slide2">slide2</li>
                <li class="slide slide3">slide3</li>
                <li class="slide slide4">slide4</li>
                <li class="slide slide5">slide5</li>
                <li class="slide slide1">slide1</li>
            </ul>
        </div>

    </div>

CSS

#slider {
    width: 720px;
    height: 300px;
    overflow: hidden;    }

#slider .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0 auto;
    padding: 0;      }

#slider .slide {
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px; }

.slide1 {background:red;} 
.slide2 {background: blue;}
.slide3 {background: green;}    
.slide4{background: purple;}
.slide5 {background: pink;}

Answer 1

你可以这样做：

#slider{
    width: 720px;
    height: 300px;
    overflow: hidden;      
    position:relative;
    left:50%;
    transform:translateX(-50%);
}