在两个 div 之间居中文本答案

【问题标题】：Center text between two divs在两个 div 之间居中文本
【发布时间】：2017-07-28 08:39:28
【问题描述】：

我正在尝试将两个浮动 div 之间的文本居中。问题是，文本没有正确居中，即使我遵循了我可以在网上找到的每一步。这是我用来实现目标的代码：

.EditingApp-head {
  background-color: #222;
  width: 100%;
  overflow: auto;
}

.EditingApp-head-logo {
  float: left;
  overflow: auto;
  width: 10%;
}

.EditingApp-head-logo-image {
  height: 40px;
  margin-top: 4px;
  float: left;
  clear: none;
}

.EditingApp-head-logo-text {
  float: left;
  margin-left: 5px;
  color: white;
}

.EditingApp-head-title {
  text-align: center;
  color: white;
  margin-left: auto;
  margin-right: auto;
}

.EditingApp-head-end {
  float: right;
  width: 10%;
}

<div className="EditingApp">
  <div className="EditingApp-head">
    <div className="EditingApp-head-logo">
      <img src={logo} className="EditingApp-head-logo-image" alt="logo" />
      <p className="EditingApp-head-logo-text">SyncPad</p>
    </div>
    <div className="EditingApp-head-end" />
    <p className="EditingApp-head-title">Title</p>
  </div>
  <div>
    <p style={{textAlign: "center"}}>center</p>
  </div>
</div>

文本“标题”略微偏右，因此它以某种方式忽略了右侧的 div。有人看到问题了吗？

【问题讨论】：

标签： html css jsx

【解决方案1】：

在你的段落周围加上<center></center>，如果我理解得很好，它会有所帮助。

【讨论】：

center 在 html5 中已弃用，因此您不应使用它。主要是您需要将标记（html）与设计（css）分开。将某些东西居中是视觉/设计，不属于标记。尝试提供其他解决方案。
您需要在 div 中仅将文本居中还是在 div 之间将 div 居中？我不明白。
@MichaelCoker 是的，我知道我在研究它。 :D 我只是给出快速而简短的回答。 ;D
@labris 我需要在 head-div 中间居中 'title'
这是完全过时的建议。

【解决方案2】：

这是因为浮动内容。 p 中的 inline 内容将环绕浮动内容，这将根据浮动内容的宽度对其进行偏移。要将标题p 居中，请应用margin: 0 10%，这样p 中的内联内容就不会受到周围浮动内容的影响。

.EditingApp-head {
  background-color: #222;
  width: 100%;
  overflow: auto;
}

.EditingApp-head-logo {
  float: left;
  overflow: auto;
  width: 10%;
}

.EditingApp-head-logo-image {
  height: 40px;
  margin-top: 4px;
  float: left;
  clear: none;
}

.EditingApp-head-logo-text {
  float: left;
  margin-left: 5px;
  color: white;
}

.EditingApp-head-title {
  text-align: center;
  color: white;
  width: 80%;
  float: left;
}

<div class="EditingApp">
  <div class="EditingApp-head">
    <div class="EditingApp-head-logo">
      <img src={logo} class="EditingApp-head-logo-image" alt="logo" />
      <p class="EditingApp-head-logo-text">SyncPad</p>
    </div>
    <p class="EditingApp-head-title">Title</p>
  </div>
</div>

【讨论】：

className 来自于它取自 JSX 文件的事实，因此它是正确的
@Chester 我确定是这样，但我不能在这里复制它。我假设您的语法中有某种错误。这一切都像普通的 CSS 一样工作，我假设这是 JSX 编译成的。但是，如果您不是在寻找 CSS 答案，您应该将您的帖子代码恢复为 JSX 并在您的帖子中使用 JSX 标签。
好的，我会记住的。 'title' 元素位于中间，'center' 段落仅供参考
对不起，我认为原始问题不够清楚。我更新了它，以便每个人都知道“标题”是最初的目标
@Chester 这是因为浮动元素占用空间并偏移文本。在标题段落上使用margin: 0 10%，文本将位于中心。

【解决方案3】：

在玩了一些之后，我开始工作了。感谢所有试图帮助我的人。这是最终的 CSS：

.EditingApp-head {
    background-color: #222;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}

.EditingApp-head-logo {
    float: left;
    overflow: auto;
    width: 10%;
}

.EditingApp-head-logo-image {
    height: 40px;
    margin-top: 4px;
    float: left;
}

.EditingApp-head-logo-text {
    margin-left: 5px;
    color: white;
}

.EditingApp-head-title {
    text-align: center;
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.EditingApp-head-end {
    float: right;
    width: 10%;
}

【讨论】：