嘗試將輸入框居中放置在div中-有解無憂

http://jsfiddle.net/6dme5y8u/5/

我需要將輸入集中在 div 中。輸入總是向右浮動。有什么辦法嗎？我試了很多次都找不到任何解決辦法。添加任何東西都可以。

body {
  background: yellow;
}

#siteInfo {     
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding-top: 3%;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

input {
    padding: 5%;
    font-size: 20px;
    text-align: center;
    border-radius: 10px;
    border: 3px solid violet;
}

html css centering

<div id="siteInfo">
   <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
</div>

uj5u.com熱心網友回復：

你可以通過改變這樣的風格來做到這#siteInfo一點：

body {
  background: yellow;
}

#siteInfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 3%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  justify-content: center;
  flex-direction:column;
  align-items:center;
}

input {
  padding: 5%;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  border: 3px solid violet;
}

html css centering

<div id="siteInfo">
   <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
</div>

uj5u.com熱心網友回復：

添加這個：

#siteInfo {
 display: flex;
 align-items: center;
 justify-content: center;
}

uj5u.com熱心網友回復：

這個怎么樣？將輸入邊距設定為 5% 自動將使其居中于其父 div。

<!DOCTYPE html>
<html>
<head>
<style>
  body{
    background: yellow;
  }

  #siteInfo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    width: 50%;
  }

  input{
    margin: 5% auto;
    padding: 5%;
    font-size: 20px;
    text-align: center;
    border-radius: 10px;
    border: 3px solid violet;
  }
</style>
</head>
<body>

<div id="siteInfo">
    <input value="Test" \>
</div>

</body>
</html>

uj5u.com熱心網友回復：

嘗試使用 flexbox。

#siteInfo {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 width: 500px;
 margin: 0 auto;

 text-align: center;
 background: rgba(255, 255, 255, 0.6);
 padding-top: 3%;
 padding-bottom: 5%;
 padding-left: 5%;
 padding-right: 5%;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379891.html

標籤：html css 定心

上一篇：表格空間輸入框

下一篇：如何使左列div占用空間，右列占用內容寬度？