2015-10-15 83 views
0

我有一個固定的寬度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; 
} 
+1

你有[無效html](http://www.w3schools.com/tags/tag_td.asp) – Alex

+0

@alirezasafian修復它 –

回答

3

讓你inputs寬度100%。就像這樣:

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

CodePen

+0

98%做到了。謝謝 –

+0

在我的項目中這樣做並沒有按計劃工作http://www.tiikoni.com/tis/view/?id=f21f858可能是什麼原因? –

+0

我可能會從輸入標籤中刪除'size =「30」',因爲您在CSS中設置了尺寸。如果這不能解決它然後檢查該元素,看看是否有任何CSS樣式重寫您的'寬度:100%'聲明。你也可以嘗試這樣寫:'windth:100%!important;'但是這是有點hacky,不建議 – zgood

1

我加邊界框的所有元素(這可能不是你想整個頁面上普遍適用的東西,它會影響填充間距等)

但是,它似乎更好地中心項目:

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

-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; 
}