0

这是代码：

[...]

<style>
  .hex {
    float: left;
    background-color: transparent;}

    .top, .bottom {
    width: 0;
    border-left: 2.2em solid transparent;
    border-right: 2.2em solid transparent;}

   .bottom{border-top: 1.25em solid #6C6;}

   .top{border-bottom: 1.25em solid #6C6;}


   .middle{
    width: 1.46em;
    height: 0.8em;
    background: #6C6;
    text-align: center;
    font-size: 3em;
    line-height: 1em;
    margin: 0 auto;
    border: 1px solid red;}

   .hex .middle input{
    color: black;
    text-align: center;
    background: transparent;
    border: 1px solid;
    width:5em;}

  </style>

[...]

<body>
  <div class="hex"> 
     <div class="top"></div>
     <div class="middle">
       <input type="text" class="playerName" id="name1" maxlength="7" value="what" disabled/>
     </div>
     <div class="bottom"></div> 
  </div>
</body>
</html>

完整示例 - http://jsbin.com/iqanoh/1

有人可以解释一下，为什么我不能控制 div（红色）内的文本框（黑色）的位置。它不会对任何内容做出反应：边距或填充更改。一般来说，我想居中（水平和垂直），但它总是在底部，甚至有点下。

4

2 回答 2

0

.middlediv有问题

.middle {
    background: none repeat scroll 0 0 #66CC66;
    border: 1px solid red;
    font-size: 3em;
    height: 0.8em;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
    width: 1.46em;
}

删除font-size,line-height并width从中删除。希望这能解决您的问题。

于 2013-08-14T08:10:25.117 回答
0

您需要设置display: block为input才能margin生效。默认情况下input，display: inline它不会与保证金一起使用。

于 2013-08-14T08:10:51.727 回答