当放大时，搜索栏不会将自身与中心对齐，只是保持不变

Question

以下是代码，我需要在放大或缩小时将搜索栏与中心对齐，默认情况下应该在任何计算机的中心...任何想法如何... .................................................. ...........................

＆＃13;

＆＃13;

.search {
			
		 text-align: center;
			
		}
					
#searchbox {
			width: 960px;	
			text-align: center;
			}
				   				  
#searchbox input {
				  outline: none;
				  }

input:focus::-webkit-input-placeholder {                                                                       color: transparent;
                                        }

input:focus:-moz-placeholder {
                              color: transparent;
                             }

input:focus::-moz-placeholder {
                               color: transparent;
                              }

#searchbox input[type="text"] {
                               background image:transparent;
                               border:2px solid #f2f2f2;
			                   font:strong 15px Times New Roman, Times, serif;
							   color: #f2f2f2;
							   width: 560px;
							   padding: 14px 17px 12px 30px;
							   -webkit-border-radius: 5px 0px 0px 5px;
							   -moz-border-radius: 5px 0px 0px 5px;
							    border-radius: 5px 0px 0px 5px;
								text-shadow: 0 1px 1.5px #fff;
								-webkit-transition: all 0.7s ease 0s;
							   -moz-transition: all 0.7s ease 0s;
							    -o-transition: all 0.7s ease 0s;
								 transition: all 0.7s ease 0s;
								}
#searchbox input[type="text"]:focus {
									background: transparent;
									border: 2px solid #f7f7f7;
									width: 750px;
														padding-left: 10px;
									}

#button-submit{
			   background: url('img/slider-arrow-right.png') no-repeat;
			   position: absolute;
			   margin-left: -40px;
			   border-width: 0px;
			   width: 43px;
			   height: 45px;
			  }	

＆＃13;

<div class = "search">
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=""/>	
</form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以为margin和form添加input：

#searchbox {
  width: 960px; 
  text-align: center;
  margin: 0 auto;
}
#searchbox input {
  outline: none;
  margin: 0 auto;
}

但是您的searchbox和input具有固定的宽度，而在小屏幕设备上，它看起来并不好！在这种情况下，您可以将width: auto用于小屏幕 jsfiddle-link具有固定宽度（您的值）
jsfiddle-link自动宽度

Answer 2

您可以将其放在text-align:center父div中，并将display设为inline-block：

注意

最好从width: 960px;删除#searchbox声明。

.parent{
   text-align: center;
}
.search{			
   display:inline-block;
}
					
 #searchbox {
    text-align: center;
    position: relative;
 }
				   				  
 #searchbox input {
   outline: none;
 }

 input:focus::-webkit-input-placeholder {
   color: transparent;
 }

 input:focus:-moz-placeholder {
   color: transparent;
 }
 
 input:focus::-moz-placeholder {
   color: transparent;
 }

 #searchbox input[type="text"] {
   background image:transparent;
   border:2px solid #f2f2f2;
   font:strong 15px Times New Roman, Times, serif;
   color: #f2f2f2;
   width: 560px;
   padding: 14px 17px 12px 30px;
  -webkit-border-radius: 5px 0px 0px 5px;
  -moz-border-radius: 5px 0px 0px 5px;
   border-radius: 5px 0px 0px 5px;
   text-shadow: 0 1px 1.5px #fff;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
   transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
  background: transparent;
  border: 2px solid #f7f7f7;
  width: 750px;
  padding-left: 10px;
}

#button-submit{
  background: url('img/slider-arrow-right.png') no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0px;
  width: 43px;
  height: 45px;
}	

<div class="parent">
    <div class = "search">
        <form id="searchbox" method="get" action="/search" autocomplete="off">
            <input name="q" type="text" size="15" placeholder="Enter keywords here..." />
            <input id="button-submit" type="submit" value=""/>	
        </form>
    </div>
</div>