2017-12-18 2 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>