Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体

0
votes
answers
楼主
23 views
+10

不能居中輸入字段css

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鏈接以獲得更多理解。 –

沙发
0
-3

添加下面會做的伎倆爲您

margin : 0 auto; 
板凳
0
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
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;} 

應該做的伎倆。

4楼
0
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; 
} 
5楼
0
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>

discard