固定宽度div中的中心td

我有一个固定的宽度div，我需要将中间的两个td居中。这里是我的小提琴：http://codepen.io/anon/pen/YyrOZm 固定宽度div中的中心td

HTML：

<div class="managed-form"> 
<table> 
     <tr> 
     <td> 
      <label title="Company"> 
      Company 
      </label> 
      <input size="30" type="text"> 
     </td> 
     <td> 
      <label title="Title"> 
      Title 
      </label> 
      <input class="" name="Title" size="30" type="text" value=""> 
     </td> 
     </tr> 
<table> 
    </div>

CSS：

.managed-form{ 
    background-color: #5B8F22; 
    width: 311px; 
    height: 369px; 
}

来源

2015-10-15 IndieTech Solutions

你有[无效html]（http://www.w3schools.com/tags/tag_td.asp） – Alex

@alirezasafian修复它 –

让你inputs宽度100％。就像这样：

input[type="text"]{ 
    width:100%; 
}

CodePen

来源

2015-10-15 14:59:41 zgood

98％做到了。谢谢 –

在我的项目中这样做并没有按计划工作http://www.tiikoni.com/tis/view/?id=f21f858可能是什么原因？ –

我可能会从输入标签中删除'size =“30”'，因为您在CSS中设置了尺寸。如果这不能解决它然后检查该元素，看看是否有任何CSS样式重写您的'宽度：100％'声明。你也可以尝试这样写：'windth：100％！important;'但是这是有点hacky，不建议 – zgood

我加边界框的所有元素（这可能不是你想整个页面上普遍适用的东西，它会影响填充间距等）

但是，它似乎更好地中心项目：

CodePen

CSS：

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 
.managed-form{background-color: #5B8F22; 
    width: 311px; 
    height: 369px;} 

input[type="text"]{ 
    width:100%; 
}

延伸阅读： Box-Sizing

来源

2015-10-15 15:15:09

-1

我会做这样的

HTML：

<div class="managed-form"> 
<table> 
    <tr> 
     <td> 
      <label for="company"> 
       Company:<br> 
       <input type="text"> 
      </label> 
     </td> 
       </tr> 
      <tr> 
     <td> 
      <label for="title"> 
       Title:<br> 
       <input tyoe="text"> 
     </td> 
    </tr> 
</table>

CSS：

.managed-form 
{ 
    background-color:red; 
    width: 311px; 
    height: 369px; 
} 
table { 
margin-left:auto; 
    margin-right:auto; 
}

来源

2015-10-15 15:30:59 Deepak

固定宽度div中的中心td

回答

相关问题