Question

好吧，我一直在搜索最后一小时试图将一个表格放在一个名字的中心，而且我正在努力直到这一点所以决定在这里问。是的我已经搜索了这个地方..

我的HTML：

<div id="main" class="main">
    <table border="0" class="container1">
        <tr>
            <td>
                <p>
                    <img src="images/doesitfit.png" />
                </p>
            </td>
        </tr>
    </table>
    <table border="0">
        <div class="container2">
            <input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"></input>
        </div>
    </table>
</div>

我的CSS：

.main {
    background-color: rgba(11, 11, 11, 0.8);
    width: 800px;
    height: 550px;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    min-height: 10em;
    height:100%;
    overflow:hidden;
}
.container1 {
    table-layout: fixed;
    height:50%;
    overflow:hidden;
    width: 802px;
    border-color:#ff0000;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    min-height: 10em;
    color:white;
    margin: auto;
}
.container2 {
}
#form {
    font-size: 19px;
    border: 0px solid;
    color: #7a7a7a;
    height:28px;
    width:295px;
    text-align:center;
    margin: auto;
}

另外，我计划添加一些表单（输入），例如电子邮件和电话号码。

非常感谢SOF，希望最终得到一些帮助。

Answer 1

我创建了一个CodePen来展示如何使输入居中。（http://codepen.io/kevingimbel/pen/BKruj）

这里的主要问题是margin: 0 auto;在输入设置为display:block;之前无法工作 - 我认为你不应该使用<table>进行布局 - 使用{{1 }}

无论如何，我还评论了Pen内部的CSS。如果你需要更多的帮助发布，我会看这个帖子一段时间。希望我能提供帮助。

Answer 2

试试这个：

form {
margin-left:auto;
margin-right:auto;
}

Answer 3

在表单元素中包装您的输入并在CSS中的表单之前丢失＃符号

<form>
  <input type="text" value="Enter Your First Name" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';">></input>
</form>


form {
  font-size: 19px;
  border: 0 solid;
  color: #7a7a7a;
  height: 28px;
  width: 295px;
  text-align: center;
  margin: 0 auto;
}

或者如果您想保留输入ID表格

<input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';">></input>


#form {
  display: block;
  font-size: 19px;
  border: 0 solid;
  color: #7a7a7a;
  height: 28px;
  width: 295px;
  text-align: center;
  margin: 0 auto;
}

需要以表格为中心的帮助

3 个答案: