Question

我有一些CSS样式问题。首先，我有一个2输入和一个按钮。当我调整窗口大小但是输入跳来跳去时，按钮是完美的位置，为什么？

按下按钮时，

和het h2会附加，小箭头必须始终位于中间。此外，文本需要始终位于弹出，水平和垂直的中间。这是真的吗？怎么样？

这是表格：

#lname, #fname {
  width: 90%; 
  height: 50px;
  margin-top: 6%;
  border-radius: 5px;
  background-color: #1e2228;
  color: #ddd;
  border: 0px;
  font-size: 2em;
  position: absolute;
  text-align: center;
}

#fname {
  left: 40px;
  top: 18px;
}

#lname {
  left: 40px;
  top: 84px;
}

#btn {
  width: 100%;
  height: 50px;

  margin-top: 72px;
  border-radius: 0 0 5px 5px;
  background-color: #1e2228;
  color: #ddd;
  border: 0px;
  font-size: 2em;
  position: absolute;
  left: 0px;
  top: 128px;
}

这是弹出窗口：

h2 {
  margin: auto;
  margin-top: 100px;
  position: relative;
  width: 50%;
  height: 205px;
  padding: 0px;
  background: #2F3742;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  font-size: 2em;
  color: #8092AA;
  margin: 100px auto 0 auto;
  padding-top: 6%;
}

h2:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 20px 20px;
  border-color: #2F3742 transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: -20px;
  left: 355px;
}

当然，你必须看到这一点！干得好！ http://codepen.io/shiva112/pen/dGMrWB

Answer 1

为什么使用绝对定位？这真是一团糟，但只需添加输入元素margin-left:5%。

对于标题箭头：h2:after{left:50%; margin-left:-20px; }

如果要将文本居中纵向和横向，则需要包装h2文本内容在span或您喜欢的任何其他元素。
然后将h2元素样式设置为：{ display:table; width:100%; }，将其子元素设置为：{ displat:table-cell; vertical-align:middle; }

无法弄清楚一些CSS样式

1 个答案: