Google과 같은 버튼이있는 검색 상자

Question

FireFox 탭 페이지에서 볼 수있는 것처럼 Google 검색과 같은 버튼 옆에 검색 상자를 어떻게 만들 수 있습니까? 저는 검색 스타일이 아닌 스타일에만 관심이 있습니다.

스타일은 중간에 가로 세로 가운데에 어떻게 배치되어 있는지 의미합니다. developerstool에서

CSS 코드 :

편집

MVC의 뷰 코드 :

이 지금과 같은 방식의 스크린 샷이다

#searchSubmit { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-start: 1px solid transparent; 
    -moz-border-top-colors: none; 
    -moz-margin-start: -1px; 
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) repeat scroll 0 0 padding-box transparent; 
    border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2); 
    border-image: none; 
    border-radius: 0 2.5px 2.5px 0; 
    border-style: solid; 
    border-width: 1px; 
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.2); 
    cursor: pointer; 
    padding: 0 9px; 
    transition-duration: 150ms; 
    transition-property: background-color, border-color, box-shadow; 
} 

@using (Html.BeginForm("Search", "Home", FormMethod.Post)) 
{ 
    <div id="#searchContainer"> 
     @Html.MultiSelectBoxFor(model => model.TestIds, Model.Tests) 
     @Html.SubmitButton("Submit", "Submit") 
    </div> 
} 

<style type="text/css"> 
    #searchContainer { 
    width: 100px; 
    height: 25px; 
    /*background-color: red;*/ 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    margin: auto; 
} 

#searchText { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    -moz-box-flex: 1; 
    background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.9); 
    border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2); 
    border-image: none; 
    border-radius: 2.5px 0 0 2.5px; 
    border-style: solid; 
    border-width: 1px; 
    box-shadow: 0 1px 0 rgba(8, 22, 37, 0.02) inset, 0 0 2px rgba(8, 22, 37, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2); 
    padding: 6px 8px; 
} 
</style> 

Answer 1

확인 답변이 비슷한 게시물 :

Best way to center a <div> on a page vertically and horizontally?

해당 게시물에서 CSS :

div { 
    width: 100px; 
    height: 100px; 
    background-color: red; 

    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    margin: auto; 
} 

당신의 텍스트 상자를 얻으려면 ...

http://jsfiddle.net/3UtEy/