Question

我这里有这个代码： https://jsfiddle.net/pj1zmL6j/

我试图让登录框与徽标保持同一个Y.我已尝试使用float和display-inline以及我在谷歌找到的其他结果的不同方式，但在徽标上设置float或display:absolute时，它消失在左边（但是logobox没有被推下）

代码：

＆＃13;

#top {
  width: 100%;
}

#head {
  float: left;
  width: 694px;
  margin: auto;
  text-align: center;
}

#user {
  width: 25%;
  float: right;
  margin: 0 25px 0 25px;
  border: 1px solid white;
  display: inline-block;
}

＆＃13;

<div id="top">
  <div id="head">
    <h1>logo</h1>
  </div>
  <div id="user">loginbox</div>
</div>

＆＃13;

Answer 1

尝试添加

display: flex;
align-items: center;

到#top id

示例：https://jsfiddle.net/zpo4gf75/2/

修改

我试着让Logo始终保持在中心位置。

检查小提琴：https://jsfiddle.net/tksL54g0/2/

Answer 2

问题是您使用固定和动态宽度（百分比）。

以下是仅使用百分比来实现目标的示例：https://jsfiddle.net/v1wvyc1v/

#top {
    width: 100%;
}

#head {
    float: left;
    width: 75%;
    text-align: center;
}

#user {
    width: 25%;
    float: right;
}

如果您有固定宽度，固定边距和固定边框尺寸，则会遇到问题。所有这些都导致您的登录框在下面包装。

居中的div推浮：右div

2 个答案: