Question

我有一个div元素（1200px宽度），其中包含3个内部divs。
第一个和最后一个具有静态大小（150px和200px）。我希望第二个在徽标和按钮之间居中。问题是我不知道如何集中这个div ......

＆＃13;

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  width: auto;
  float: left;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}

＆＃13;

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

＆＃13;

Answer 1

一种方法是将display元素的.text设置为inline-block（并删除float: left），然后将text-align: center添加到父元素为了使它居中。由于其他元素是浮动的，text-align不会影响它们，并且它只会使内联.text元素居中。

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  text-align: center;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  display: inline-block;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

或者，您也可以将margin: auto添加到.text元素，然后在父元素上设置display: flex。这样，.text元素将水平居中，每侧的空间相等。在这样做时，您不需要浮动元素（因为它们是flexbox项目）。

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  display: flex;
}
.logo {
  width: 150px;
  height: 50px;
  background-color: darkred;
}
.text {
  margin: auto;
}
.buttons {
  width: 200px;
  height: 70px;
  background-color: darkgreen;
}

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

Answer 2

问题是您要浮动中心列。唐＆＃39;吨
。做你正在做的事情的正确方法是先将左列和右列放在一起，然后中间列不必浮动，你只需使用text-align。

＆＃13;

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  text-align:center;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}

＆＃13;

<div class="container">
  <div class="logo"></div>
  <div class="buttons"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
</div>

＆＃13;

Answer 3

尝试

.text {
  width: auto;
  float: left;
  text-align: center;
}

Answer 4

Flexbox琐碎：

＆＃13;

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  display:flex;
  justify-content:space-between;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  background:#c0ffee
  }
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}

＆＃13;

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

＆＃13;

Answer 5

这是一个（我认为）更合适的解决方案使整个 div和不仅仅是文本，使用{{1} }

https://jsfiddle.net/tyvfcbre/1/

width:calc(100% - 350px);

背景是为了展示.text { display:inline-block; width:calc(100% - 350px); background:lightgrey; }位置。

填充两个静态大小的div之间的空间

5 个答案: