居中輸入文本字段

我有一個關於如何將我的輸入文本框放在頁面中心並且有響應的問題。居中輸入文本字段

下面是HTML代碼：

<body> 
     <div class="container container-padding50"> 
      <input type="text" class="js-userinput container-textinput" placeholder="mySearchApp"> 
    </div> 
     <div class="message"> 
     <p>input anything you want search and press Enter</p> 
     </div> 
    <div class="js-container">  
     <!-- image shows here --> 
    </div> 

    <script src="javascript/main.js"></script> 

</body>

，我已經嘗試過CSS有：

body { 
    width: 80%; 
    max-width: 1024px; 
    margin: 0 auto; 
} 

.container-padding50 { 
    padding-top: 50px; 
    left:50%; 
} 

.container-textinput { 
    text-aligen:center; 
    width: 80%; 
    /*display: relative;*/ 
    left: 50%; 
    padding: 20px; 
    font-size: 16px; 
    font-family: Helvetica, sans-serif; 
    border:none; 
    border-bottom: 2px solid black; 
}

我打算把我的輸入字段看起來很簡單，因爲只有用「mySearchApp」下劃線，但我已嘗試left:50%爲了使這個在頁面中間，有人可以告訴我爲什麼這不起作用？我在這裏想念什麼？

來源

2017-07-30 mystreie

爲了使用left屬性，必須定位該元素。

的left CSS屬性參與指定定位元件的水平位置。它對非定位元素沒有影響。當中心

body { 
 
    width: 80%; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
} 
 

 
.container-padding50 { 
 
    position: relative;    /* NEW */ 
 
    padding-top: 50px; 
 
    height: 80px;     /* NEW */ 
 
} 
 

 
.container-textinput { 
 
    position: absolute;    /* NEW */ 
 
    left: 50%; 
 
    transform: translateX(-50%);  /* NEW; see note below */ 
 
    text-align: center; 
 
    width: 80%; 
 
    padding: 20px; 
 
    font-size: 16px; 
 
    font-family: Helvetica, sans-serif; 
 
    border: none; 
 
    border-bottom: 2px solid black; 
 
}

<div class="container container-padding50"> 
 
    <input type="text" class="js-userinput container-textinput" placeholder="mySearchApp"> 
 
</div> 
 
<div class="message"> 
 
    <p>input anything you want search and press Enter</p> 
 
</div> 
 
<div class="js-container"> 
 
    <!-- image shows here --> 
 
</div>

爲什麼使用transform：

^{https://developer.mozilla.org/en-US/docs/Web/CSS/left}

試試這個

Element will not stay centered, especially when re-sizing screen

來源

2017-07-30 23:06:54

感謝您的回答，現在我明白我已經失去了位置值在這裏，還有一個問題，如果我加入了全窗口大小的畫布的動畫背景，所有上述重疊的html標籤就可以了，我應該把我的html標籤中的所有位置值放到相對位置嗎？ – mystreie

居中輸入文本字段

回答

相關問題