如何对齐在HTML

-1

响应输入框这是我整个的HTML代码：如何对齐在HTML

<!DOCTYPE html> 
<html lang = "en"> 
    <head> 
    <meta charset = "utf-8"> 
    <title>A</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     body { background: url(img/dark.png) !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */ 
     #logo { text-indent: 515px; z-index:9999; position:relative; color:#FFCC00;} 
     #links {padding-top: 0.6cm;} 
    #custom-search-input{ 
     padding: 3px; 
     border: solid 1px #E4E4E4; 
     border-radius: 6px; 
     background-color: #fff; 
    } 

    #custom-search-input input{ 
     border: 0; 
     box-shadow: none; 
    } 

    #custom-search-input button{ 
     margin: 2px 0 0 0; 
     background: none; 
     box-shadow: none; 
     border: 0; 
     color: #666666; 
     padding: 0 8px 0 10px; 
     border-left: solid 1px #ccc; 
    } 

    #custom-search-input button:hover{ 
     border: 0; 
     box-shadow: none; 
     border-left: solid 1px #ccc; 
    } 

    #custom-search-input .glyphicon-search{ 
     font-size: 23px; 
    } 
    </style> 
    </head> 

    <body> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-8" id="logo"> 
        <img src="img/iconf.png" class="img-responsive" style="max-width:180px"> 
       </div> 
       <div class="col-md-4" align="right" id="links"> 
        <a href="C:\Users\admin\Desktop\Code\I\tp.html">Read books</a> 
        <a href="#">Play</a> 
        <a href="#">Eat</a> 
        <a href="#">Help</a>  
       </div> 
      </div> 
      <div class="jumbotron" style="background: url('img/yellow.jpg')"> 
       <h1 align="center">Read books</h1> 
       <h4 align="center">Enter a bookname:</h4> 
       <div class="row"> 
         <div class="col-md-6"> 
          <div id="custom-search-input"> 
           <div class="input-group col-md-12"> 
            <input type="text" class="form-control input-lg" placeholder="Eg: 'Fifty Shades of Gray'" /> 
            <span class="input-group-btn"> 
             <button class="btn btn-info btn-lg" type="button"> 
              <i class="glyphicon glyphicon-search"></i> 
             </button> 
            </span> 
           </div> 
          </div> 
         </div> 
        </div> 
      </div>      
     </div> 
    </body> 
</html>

我不知道如何使搜索框的页面的中心。我曾尝试在input标记中添加align="center"，但它不起作用。我看到几个例子，其中float:center属性被使用，但我不明白我应该在我的代码中使用它。请帮忙。谢谢。

来源

2015-10-04 Stupid Man

有没有这样的东西'浮动：center' – dippas

替换这些行 -

<div class="row"> 
    <div class="col-md-6"> 
     <div id="custom-search-input"> 
      <div class="input-group col-md-12">

由这些线 -

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     <div id="custom-search-input"> 
      <div class="input-group col-md-12">

你有你的搜索框为中心。

要明白这是怎么工作的，访问这里 - http://getbootstrap.com/css/#grid-offsetting

来源

2015-10-04 14:06:50

感谢的作品。 –

要了解这是如何工作的，请访问此处 - http://getbootstrap.com/css/#grid-offsetting –

如何对齐在HTML

回答

相关问题