Question

我正在尝试将文本置于两个浮动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。有没有人看到这个问题？

Answer 1

将<center></center>放在你的段落周围，如果我理解的话会有所帮助。

Answer 2

这是因为浮动的内容。 inline中的p内容将围绕浮动内容进行包装，这将取决于浮动内容的宽度。要将标题p居中，请应用margin: 0 10%，以便p中的内嵌内容不受周围浮动内容的影响。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 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%;
}

两个div之间的中心文本

3 个答案: