UL对齐底部中心

Question

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

请检查这个小提琴：

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>

Answer 2

将'use strict'; function promisifyRequest(obj) { return new Promise(function(resolve, reject) { function onsuccess(event) { resolve(obj.result); unlisten(); } function onerror(event) { reject(obj.error); unlisten(); } function unlisten() { obj.removeEventListener('complete', onsuccess); obj.removeEventListener('success', onsuccess); obj.removeEventListener('error', onerror); obj.removeEventListener('abort', onerror); } obj.addEventListener('complete', onsuccess); obj.addEventListener('success', onsuccess); obj.addEventListener('error', onerror); obj.addEventListener('abort', onerror); }); } function IndexDBWrapper(name, version, upgradeCallback) { var request = indexedDB.open(name, version); this.ready = promisifyRequest(request); request.onupgradeneeded = function(event) { upgradeCallback(request.result, event.oldVersion); }; } IndexDBWrapper.supported = 'indexedDB' in self; var IndexDBWrapperProto = IndexDBWrapper.prototype; IndexDBWrapperProto.transaction = function(stores, modeOrCallback, callback) { return this.ready.then(function(db) { var mode = 'readonly'; if (modeOrCallback.apply) { callback = modeOrCallback; } else if (modeOrCallback) { mode = modeOrCallback; } var tx = db.transaction(stores, mode); var val = callback(tx, db); var promise = promisifyRequest(tx); var readPromise; if (!val) { return promise; } if (val[0] && 'result' in val[0]) { readPromise = Promise.all(val.map(promisifyRequest)); } else { readPromise = promisifyRequest(val); } return promise.then(function() { return readPromise; }); }); }; IndexDBWrapperProto.get = function(store, key) { return this.transaction(store, function(tx) { return tx.objectStore(store).get(key); }); }; IndexDBWrapperProto.put = function(store, key, value) { return this.transaction(store, 'readwrite', function(tx) { tx.objectStore(store).put(value, key); }); }; IndexDBWrapperProto.delete = function(store, key) { return this.transaction(store, 'readwrite', function(tx) { tx.objectStore(store).delete(key); }); }; 放在任何地方都很重要。

其次，让float: left与底部中心对齐的技巧是首先使父<ul>的宽度为100％，并确保该div的<div>设置为text-align。

然后，最后一项修复是将center而不是display: inline-block设置为float: left，以使它们显示在同一行，而不是每个都显示新行。

可以在此处找到带有解决方案的分叉JSFiddle：https://jsfiddle.net/hqhq8eg0/

CSS代码：

<li>