【问题标题】：CSS: Can't move my button verticallyCSS：无法垂直移动我的按钮
【发布时间】：2015-01-21 14:19:44
【问题描述】：

我得到了以下简单的 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
      <div id="bar">
          <span>
               Palavra       
          </span>
      <form>
          <input class="buttom" type="submit" value=""> 
      </form>
  </div>

  </body>
</html>

而我的 CSS 代码是这样的：

#bar{
    width:100%;
    height:7%;
    background-color:#5959AB;
    color:white;
    font-family:"Arial";
    font-size:150%;
    font-weight: bold;
    line-height: 190%;
}

.buttom{
background: url(icone_dicionario.jpg) no-repeat;
cursor: pointer;
width: 40px;
height: 41px;
}

input{
    position:relative;
    bottom:1000%;
    left:13%;
}



html, body{
height:100%;
}

看看 CSS 上的 input 样式。它代表的元素（字典图标中的按钮）遵循我给它的水平位置（“left: 13%”），而不是垂直位置（不管我放在它上面的值），如您所见：

有人可以帮我吗？

PS：我希望按钮出现在栏内，除了那个词......

【问题讨论】：

看起来你是在一个居中的输入和居中的文本之后。 Here is an example 使用 display: inline-block 和 vertical-align: middle

标签： html css button vertical-alignment

【解决方案1】：

为什么不直接使用 'display: inline-block'？

例如。

#bar span {display: inline-block}
form {display: inline-block}

在这里查看小提琴：http://jsfiddle.net/pavkr/483pm2x6/2/

【讨论】：

【解决方案2】：

JSFiddle

只需将属性 top: -40px; 添加到 input 样式中。因为输入的宽度是固定的。

input{
    position:relative;
    bottom:1000%;
    left:13%;
    top:-40px;
}

【讨论】：

嗯，只是不明白为什么“-top”有效而“bottom”无效
@user3708854 如果同时指定了顶部和底部（技术上，不是自动），顶部获胜。如果左右都指定了，当方向为 ltr 时左获胜，当方向为 rtl 时右获胜。 developer.mozilla.org/en-US/docs/Web/CSS/position

【解决方案3】：

您为输入设置了 "position:relative;"。 “相对”这个名字意味着元素的位置是相对于它自己的。如果你想让它垂直，你可以选择以下之一：

使用顶部而不是底部并使用像素 (px) 而不是百分比 (%)
使用 "position:absolute;" 并使用更小的单位，否则元素将从屏幕的可见部分消失

如果您希望图标位于栏内您必须为栏类指定位置。类似：

 #bar
 {
   position:relative;
  /* rest of css */
 }

那么您可以为您的图标使用绝对位置。与 top:0px; 和 right:0px; 一起放置，使其“粘”在栏的右上角

【讨论】：

我希望按钮出现在单词旁边和栏内，正如我在上一版中所说的那样......而且这个大值只是为了表明它无论如何都不会移动。

【解决方案4】：

您可能希望将 div 位置设为相对位置，将按钮位置设为绝对位置，然后设置顶部位置而不是底部位置。您也可以使用负数作为位置。

【讨论】：