html - UL 对齐底部中心

Question

我正在使用“margin 0 auto”，但 ul 没有与底部中心对齐，我在 ul 周围有一个 div。我究竟做错了什么？谢谢大家

请检查这个 fiddle :

https://jsfiddle.net/tnv3q3kb/

html

<div class="container">

    <div class="sideMenu">
    </div>
    
    <div class="mapcontainer">
        
        <div class="map">
            <span>Loading map</span>
        </div>
        <div class="menuBottom">
            <ul>
                <li>WEATHER</li>
                <li>HOTELS</li>
                <li>RESTAURANTS</li>
            </ul>
        </div>        
    </div>
    
</div>

CSS

.container {
    width: 100%;
}

.sideMenu {
    float: left;
    background: #222b30;
    width: 20%;
    height: 100vh;
}

.mapcontainer {
    float: left;
    background: #999;
    width: 80%;
}

.map {
    display: block!important;
    margin: 0 auto;
    height: 100vh;
}

div.menuBottom {
    float: left;
    position: absolute;
    bottom: 10px;
}

div.menuBottom ul {
    float: left;
    background: rgba(0,0,0,0.72);
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}

div.menuBottom ul li {
    float: left;
    margin-left: 20px;
}

div.menuBottom ul li:first-child {
    margin-left: 0;
}

Answer 1

您好，现在将您的 css 修改为这样

.mapcontainer{
    position: relative;
}
div.menuBottom {
    position: absolute;
    bottom: 10px;
    text-align: center;
    left: 0;
    right: 0;
}
div.menuBottom ul{float: none;
    display: inline-block;}

演示是

.container {
    width: 100%;
}

.sideMenu {
    float: left;
    background: #222b30;
    width: 20%;
    height: 100vh;
}

.mapcontainer {
    float: left;
    background: #999;
    width: 80%;
}

.map {
    display: block!important;
    margin: 0 auto;
    height: 100vh;
}

div.menuBottom {
    float: left;
    position: absolute;
    bottom: 10px;
}

div.menuBottom ul {
    float: left;
    background: rgba(0,0,0,0.72);
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}

div.menuBottom ul li {
    float: left;
    margin-left: 20px;
}

div.menuBottom ul li:first-child {
    margin-left: 0;
}


.mapcontainer{
        position: relative;
    }
    div.menuBottom {
        position: absolute;
        bottom: 10px;
        text-align: center;
        left: 0;
        right: 0;
    }
    div.menuBottom ul{float: none;
        display: inline-block;}

<div class="container">
    

    <div class="sideMenu">
    </div>
    
    <div class="mapcontainer">
        
        <div class="map">
            <span>Loading map</span>
        </div>
        <div class="menuBottom">
            <ul>
                <li>WEATHER</li>
                <li>HOTELS</li>
                <li>RESTAURANTS</li>
            </ul>
        </div>        
    </div>
    
</div>