不能居中输入字段css

  • Z时代
  • 2024-01-10
  • 分类：问答

对不起，我是新手;试图构建谷歌网页进行实践。我无法弄清楚为什么我的“输入”不能进入页面的中心。不能居中输入字段css

HTML：

#submitsearch {  
    text-align:center;  
}  
#submitsearch [type="submit" ] {  
    width: 120px;  
    height: 30px;  
    text-align: center;  
    background: #D3D3D3;  
    border: 1px solid #fff;  
    border-radius: 2px;  
    color:#606060;  
}

<div id="submitsearch">  
    <input type="submit" value="Google Search">  
    <input type="submit" value="I'm feeling lucky">  
</div>

回答：

添加下面会做的伎俩为您

margin : 0 auto;

回答：

<div id = "parent"> 
    <input type="submit" value="Google Search"> 
     <input type="submit" value="I'm feeling lucky"> 
     </div>

CSS

html,body,#parent{ 
    width:100%; 
    height:100%; 
} 
#parent{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

Working Example

回答：

https://codepen.io/Ylama/pen/BJjBeq

<div> 
    <input type="submit" value="Google Search"> 
    <input type="submit" value="I'm feeling lucky"> 
    </div>

CSS

div {width: 100%;text-align: center;} 
input {margin: 0 auto;}

应该做的伎俩。

回答：

尝试以下方法：

<div class="make-inputs-center"> 
     <input type="submit" value="Google Search"> 
    <input type="submit" value="I'm feeling lucky"> 
    </div>

和CSS：

.make-inputs-center { 
    text-align:center; 
}

回答：

有两种方法，你可以去了解它。

您可以使用absolute positioning和transform the submitsearch页面的中心（这允许你进行任何更改任何你父容器）：

#submitsearch {  
    position:absolute;  
    transform: translate(-50%,-50%);  
    -webkit-transform: translate(-50%, -50%);  
    -moz-transform: translate(-50%, -50%);  
    -o-transform: translate(-50%, -50%);  
    -ms-transform: translate(-50%, -50%);  
    left:50%;  
    top:50%;  
}  
#submitsearch [type="submit" ] {  
    width: 120px;  
    height: 30px;  
    text-align: center;  
    background: #D3D3D3;  
    border: 1px solid #fff;  
    border-radius: 2px;  
    color:#606060;  
}

<div id="submitsearch">  
    <input type="submit" value="Google Search">  
    <input type="submit" value="I'm feeling lucky">  
</div>

OR

将您的submitsearch设置为flexbox和调整，并增加其高度100vh证明在页面的中心内容（或增加你的身体和submitsearch高度为100％）：

#submitsearch {  
    display:flex;  
    align-items:center;  
    justify-content:center;  
    height:100vh;  
}  
#submitsearch [type="submit" ] {  
    width: 120px;  
    height: 30px;  
    text-align: center;  
    background: #D3D3D3;  
    border: 1px solid #fff;  
    border-radius: 2px;  
    color:#606060;  
}

<div id="submitsearch">  
    <input type="submit" value="Google Search">  
    <input type="submit" value="I'm feeling lucky">  
</div>

以上是 不能居中输入字段css 的全部内容， 来源链接： utcz.com/qa/261315.html

回到顶部