Question

我想将ul置于float left和float right之间。它们位于一个宽度固定且也居中的容器内。

<header>
<div class="conatiner">
    <div class="left"><img></div>
    <div class="right"><img></idv>
    <ul class="center">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<header>

我希望他们看起来像这样：

[     [[logo]            [Item 1 Item 2 Item 3]          [options]]     ]

我的css是这样的：

header {
    width: 100%;
}
.container {
     max-width: 1200px;
}
.left {
     float: left;
 }
.right {
     float: right;
 }
 .center {
      text-align: center;
 }

然而，.center ul位于。left和.right之间，因为.left的宽度大于.right，所以它会稍微转移到对。我想要实现的是无论.left和.right有多大，都要让它居中。

Answer 1

在这种情况下，您可以使用position: absolute上的ul和transform: translateX(-50%)来居中。

使用position: absolute，您可以从元素流中移除ul，这样图片的宽度不会影响ul的位置，并且它将始终保持在窗口的中心。

header {
  width: 100%;
  position: relative;
}
.container {
  max-width: 1200px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  text-align: center;
  padding: 0;
  position: absolute;
  margin: 0;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

<header>
  <div class="conatiner">
    <div class="left"><img src="" alt="Lorem ipsum dolor."></div>
    <div class="right"><img src="" alt="right"></div>
    <ul class="center">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</header>

Answer 2

你可以重置BFC以获取ul，因此它可以在浮动元素之间居中，而不会在其下面。

Diplay:table;是合适的，因为容器的内容也会缩小：

header {
    width: 100%;
  background:linear-gradient(to left, gray 50%, lightgray 50%);
}
.container {
     max-width: 1200px;
}
.left {
     float: left;
  margin-right:50px;/* cause it is 50px less wide than the other one */
 }
.right {
     float: right;
 }
 .center {
      display:table;
   margin:auto;
   padding:0;
   border-spacing:0.25em;
 }
.center li {
  display:table-cell;
  border:1px solid;
  }

<header>
<div class="container">
    <div class="left"><img src="http://lorempixel.com/50/50"></div>
    <div class="right"><img src="http://lorempixel.com/100/50"></div>
    <ul class="center">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<header>

或flex：

header {
    width: 100%;
  background:linear-gradient(to left, gray 50%, lightgray 50%);/* see center */
}
.container {
     max-width: 1200px;
  display:flex;
}
.left {
    order:-1;
  margin-right:-50px;/* if know wich is biiger and how much bigger an equal negative margin of that extra size may swallow the difference .. */ 
 }
.right {
     order:1;
 }
 .center {
  display:flex;
   margin:auto;/* instead : justify-content:space-between; on parent (given into another answer ) */
   padding:0;
   order:0
 }
.center li {
  list-style-type:none;
  margin:0.25em;
  border:solid 1px;
  }

<header>
<div class="container">
    <div class="left"><img src="http://lorempixel.com/100/50"></div>
    <div class="right"><img src="http://lorempixel.com/50/50"></div>
    <ul class="center">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<header>

Answer 3

最简单，最简单的方法是flexbox。像这样：

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<header>
<div class="container">
    <div class="left"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
    <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <div class="right"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
</div>
<header>

＆＃13;

Answer 4

试试这个方法：

.inline-block { display: inline-block; }
.floatright { float: right; }
.floatcenter { margin-right: auto; margin-left: auto; }
.floatleft { float: left; }

<div style="text-align:center;">
<div class="inline-block floatleft">Logo</div>
<div class="inline-block floatcenter">Menu</div>
<div class="inline-block floatright">Options</div>
</div>

容器中的浮子之间的中心ul

4 个答案: