練習HTML + CSS，定位元素有問題

Question

我想在我的頁面上做一個體面的佈局，我有菜單，內容部分和頁腳。

我將菜單/內容/部分分成兩部分，並在其中放置一些文本/圖像。我正試圖在div的中間放置圖像。

* { 
 
    box-sizing: border-box; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.mainWidth { 
 
    width: 900px; 
 
    margin: 0 auto; 
 
    border: 2px solid pink; 
 
} 
 
.menu { 
 
    width: 100%; 
 
    height: 20%; 
 
    border: 1px solid blue; 
 
    background: grey; 
 
} 
 
#menuLeft { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
#menuRight { 
 
    float: right; 
 
} 
 
#menuRight li { 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
.content { 
 
    border: 1px solid orange; 
 
    margin: 150px auto; 
 
} 
 
#contentHalf { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#contentHalf2 { 
 
    float: right; 
 
} 
 
.footer { 
 
    height: 200px; 
 
    border: 1px green solid; 
 
    background: grey; 
 
} 
 
#footerLeft { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#footerRight { 
 
    float: right; 
 
}

<div class="menu"> 
 
    <div class="mainWidth"> 
 
    <div id="menuLeft"> 
 
     <img src="images/jez.jpg" width="205px" height="136px"> 
 
    </div> 
 
    <div id="menuRight"> 
 
     <ul> 
 
     <li>Start</li> 
 
     <li>O nas</li> 
 
     <li>Kontakt</li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
    <div class="clear"></div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="mainWidth"> 
 
    <div id="contentHalf"> 
 
     <h1>Tytul</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac 
 
     eleifend. Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus 
 
     erat pretium. 
 
     </p> 
 
    </div> 
 
    <div id="contentHalf2"> 
 
     <img src="images/bg.jpg" width="213px" height="142px"> 
 
    </div> 
 
    <div class="clear"></div> 
 
    </div> 
 
</div> 
 

 
<div class="footer"> 
 
    <div class="mainWidth"> 
 
    <div id="footerLeft"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac eleifend. 
 
     Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus erat 
 
     pretium. 
 
     </p> 
 
    </div> 
 
    <div id="footerRight"> 
 
     <img src="images/bg.jpg" width="213px" height="142px"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

首先，在所有。如果你想2容器並排各佔50％，做正確的方式，既浮動左，均與50％的寬度......這樣開始：

#menuLeft { 
    width: 50%; 
    float: left; 
} 
#menuRight { 
    width: 50%; 
    float: left; 
} 
#contentHalf { 
    float: left; 
    width: 50%; 
} 
#contentHalf2 { 
    float: left; 
    width: 50%; 
} 
#footerLeft { 
    float: left; 
    width: 50%; 
} 
#footerRight { 
    float: left; 
    width: 50%; 
} 

假設你想你的頭的ul在正確的，那麼就加上：

#menuRight {  
    text-align:right; 
} 

爲您li's已經inline-block的，你希望他們的行爲方式。

與您的圖像相同。在這種情況下，你希望它們居中，所以只需加上：

#contentHalf2 { 
    text-align:center; 
} 
#footerRight { 
    text-align:center; 
} 

這是你在找什麼？ FIDDLE

Answer 2

我相信這是你試圖實現的：https://jsfiddle.net/u06x2hof/

也就是說，具有各自的「半」內居中的圖像。

當然，最簡單的方式在CSS中的東西是display : flex;和justify-content : center;，所以這就是我所做的。