Question

如何将以下代码垂直居中？它已经垂直居中，但我无法弄清楚如何让它居中到屏幕中间。此外，我想在输入字段下添加一些小链接，如“关于|报告图像|等等”，但它们也没有正确居中。

SQL> alter user HR account unlock;
SQL> grant connect, resource to HR;

Answer 1

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">

    <title>Upload</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
        body {
            font: 12px 'Open Sans';
        }
        .form-control, .thumbnail {
            border-radius: 2px;
        }
        .btn-danger {
            background-color: #B73333;
        }


        /* File Upload */
        .fake-shadow {
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
        .fileUpload {
            position: relative;
            overflow: hidden;
        }
        .fileUpload #upload_form {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 33px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .img-preview {
            max-width: 100%;
        }
    </style>

    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>

  <div class="row">
  <div class="col-md-12">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
          <div class="main-img-preview center-block">
            <img class="thumbnail img-preview" src="http://farm4.static.flickr.com/3316/3546531954_eef60a3d37.jpg" title="Preview Logo">
        </div>
        <div class="input-group">
            <input id="fakeUploadLogo" class="form-control fake-shadow" placeholder="Select Image" disabled="disabled">
            <div class="input-group-btn">
              <div class="fileUpload btn btn-danger fake-shadow">
                <span><i class="glyphicon glyphicon-upload"></i> Upload Image</span>
                <form id="image_form" action="upload_image" method="post">
                    <input class="attachment_upload" id="upload_form" name="image" type="file" enctype="multipart/form-data">
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    var brand = document.getElementById('upload_form');
    brand.className = 'attachment_upload';
    brand.onchange = function() {
        document.getElementById('fakeUploadLogo').value = this.value.substring(12);
    };

    function AKUpload(input) {
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                window.location.replace(this.responseText);
            }
        };
        xmlHttpRequest.open("POST", '/upload_image', true);
        var formData = new FormData();
        formData.append("file", input.files[0]);
        xmlHttpRequest.send(formData);
        console.log(xmlHttpRequest.response);

    }
    $("#upload_form").change(function() {
        AKUpload(this);
    });
});



</script>
</body>
</html>

＆＃13;

我对你的网格结构做了一些小改动。最佳做法是创建行而不是列，所以我这样做。我用col-md-6 and col-md-offset-3创建了一个列（测试）在我的设备上

Answer 2

尝试使用引导程序中网格视图的＆＃34; justify-content-start＆＃34; -Function。

你的行应该像这样开始：

<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6">
        <!-- put your content here -->
      </div>
    </div>
  </div>
</body>

这是Bootstrap 4中的新功能，是一个非常好的功能。

Answer 3

更新后的答案（垂直对齐）：由于您的答案已更新为要求垂直居中，请尝试将以下内容添加到CSS中。有many questions询问垂直对齐。

html, body {
  height: 100%;
}
body {
  display:flex;
  align-items:center;
}

原始答案（水平对齐）： 首先，不要将列类添加到container div。

如果您想使用Bootstrap 4，请尝试将center-block类切换到新的mx-auto类。然后，您可以将其应用于主列以代替偏移量：

<div class="col-md-6 mx-auto">
...
</div>

或者，对于Bootstrap 3，请检查this answer。

Bootstrap居中

3 个答案: