2017-12-18 76 views
0

对不起,我是新手;试图构建谷歌网页进行实践。我无法弄清楚为什么我的“输入”不能进入页面的中心。不能居中输入字段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>

+1

请务必复制所有代码中发行部分的行。添加_div_的开始标签,以便我们可以了解更多_CSS_ – andrewnagyeb

+0

div:'width:100%text-align:center;',input:'margin:0 auto;' – Ylama

+1

您可以添加jsfiddle链接以获得更多理解。 –

回答

-3

添加下面会做的伎俩为您

margin : 0 auto; 
1
<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

+1

谢谢,似乎工作!糟糕的格式。 –

+0

@ChanningLai:请接受这个答案 –

0

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

应该做的伎俩。

0

尝试以下方法:

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

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

您可以使用absolute positioningtransform 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>