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已经内联阻止，因此他们会按照您的意愿行事。

与您的图片相同。在这种情况下，您希望它们居中，所以只需添加：

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

这是你要找的？的 FIDDLE

Answer 2

我相信这是你想要实现的目标：https://jsfiddle.net/u06x2hof/

也就是说，让图像集中在各自的“一半”内。

当然，在CSS中居中的最简单方法是使用display : flex;和justify-content : center;，这就是我所做的。

练习HTML + CSS，定位元素有问题

2 个答案: