在浮动元素之间居中文本答案

【问题标题】：Center a text between to floating elements在浮动元素之间居中文本
【发布时间】：2017-02-19 13:04:37
【问题描述】：

我正在为我的网站制作导航栏。导航栏包含一个菜单图标、一个标题“评论”和一个搜索图标。图标需要与边框有 3% 的距离。问题是我无法弄清楚我如何使文本居中。我认为问题出在浮动元素上，我不知道如何将浮动元素居中于其他元素之间（在本例中为两个图标）。我希望有人能给我一个答案:)

这是结果：

the navigation bar

* {
  padding: 0px;
  margin: 0px;
}

#nav {
  width: 94%;
  background-color: blue;
  margin: 3%;
}

.menuButton {
  float: left;
}

#nav h1 {
  float: left;
}

.searchButton {
  float: right;
}

<!DOCTYPE html>
<html>

<head>
  <title> Reviews </title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <meta charset="utf-8">
</head>

<div id="dropMenu"></div>

<body>
  <div id="nav">
    <img src="menu.jpg" class="menuButton">
    <h1> REVIEWS. </h1>
    <img src="search.jpg" class="searchButton">

  </div>

  <div id="content"></div>

  <div id="footer"></div>
</body>
</html>

【问题讨论】：

标签： html css center elements

【解决方案1】：

你可以使用弹性盒子模型和边距：

* {
  padding: 0px;
  margin: 0px;
}

#nav {
  width: 94%;
  background-color: blue;
  /* see center */
  background-image:linear-gradient(to right, transparent 50%, rgba(0,0,0,0.5) 50%);
  margin: 3%;
  display: flex;
  justify-content: center;
}

.menuButton {
  float: left;
  margin: auto auto auto 0;
}

#nav h1 {
  float: left;
}

.searchButton {
  margin: auto 0 auto auto;
}

<!DOCTYPE html>
<html>
<head>
  <title> Reviews </title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
  <div id="nav">
    <img src="menu.jpg" class="menuButton">
    <h1> REVIEWS. </h1>
    <img src="search.jpg" class="searchButton">
  </div>
  <div id="content"></div>
  <div id="footer"></div>
</body>
</html>

编辑。

只考虑浮动，那么浮动元素应该在流动的前面，让其他非浮动元素进入中间，所以h1可以站在中间并获得text-align 或通过display 和margin 居中。

float 不允许元素在 flex 中垂直居中。

文本对齐，h1 没有浮动

* {
  padding: 0px;
  margin: 0px;
}

#nav {
  width: 94%;
  background-color: blue;
  margin: 3%;
}

.menuButton {
  float: left;
}

#nav h1 {
 display:table;/* shrinks on itself */
 margin:auto;
}

.searchButton {
  float: right;
}

<div id="dropMenu"></div>


<div id="nav">
  <img src="menu.jpg" class="menuButton">
  <img src="search.jpg" class="searchButton">
  <h1> REVIEWS. </h1>

</div>

<div id="content"></div>

<div id="footer"></div>

或 h1 不带浮动的显示和边距

* {
  padding: 0px;
  margin: 0px;
}

#nav {
  width: 94%;
  background-color: blue;
  margin: 3%;
}

.menuButton {
  float: left;
}

#nav h1 {
 text-align:center
}

.searchButton {
  float: right;
}

<div id="dropMenu"></div>


<div id="nav">
  <img src="menu.jpg" class="menuButton">
  <img src="search.jpg" class="searchButton">
  <h1> REVIEWS. </h1>

</div>

<div id="content"></div>

<div id="footer"></div>

【讨论】：

解释不赞成票以及它在哪里不起作用，让您的反对票有用。我可能误解了这个问题，但照原样，我会在网上保留答案。谢谢
@Soccerlife，没问题，我知道它有效。你能接受其中一个答案（两者都像你说的那样有效），或者至少支持那些有效地帮助你的人吗？
我是 StackOverflow 的新手，我不知道该怎么做，
@Soccerlife 你有一个带有向上和向下箭头的数字，让你对答案或问题投赞成票或反对票。如果你问了一个问题，除了答案之外，你还应该有一些东西来接受它，或者选择你选择的一个来回答你的问题。您只能接受/选择一个。您可以对每个答案投票一次。您也可以再次点击它来撤销/删除您的投票。 :) 欢迎
谢谢，我还没有看到那个选项，因为我只有六个哈哈

【解决方案2】：

这是你期望的输出吗

Check output in codepen.io

* {
  padding: 0;
  margin: 0;
}

#nav {
  width: 100%;
  background-color: blue;
  margin: 3%;
}

.menuButton {
  float: left;
}



.searchButton {
  float: right;
}

.a {
  text-align: center;
}

<head>
  <title> Reviews </title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <meta charset="utf-8">
</head>


<div id="dropMenu">



</div>

<body>

  <div id="nav">
    <img src="menu.jpg" class="menuButton">
    <h1 class="a"> REVIEWS. </h1>
    <img src="search.jpg" class="searchButton">


  </div>

  <div id="content">



  </div>

  <div id="footer">



  </div>


</body>

【讨论】：

不完全是，搜索按钮现在位于“评论”文本和菜单图标下方。我希望三个元素内嵌在两个图标之间的“评论”文本中。
你能分享你的完整代码，以便我知道是什么问题
您在哪个屏幕上查看网站
我在我的问题中发送了完整的代码。我正在 iMac 上查看该网站。
搜索按钮有填充或边距吗？