Question

这是我的整个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>

我不知道如何将搜索框对齐到页面中心。我尝试在align="center"标记中添加input，但它不起作用。我看到了一些使用float:center属性但我不明白我应该在代码中使用它的示例。请帮忙。谢谢。

Answer 1

替换这些行 -

<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

如何在HTML中对齐响应式输入框

1 个答案: