Question

尝试过其他帖子中建议的解决方案之后，我将留下我的新手代码，其中嵌入的图像根本不会居中，我不知道为什么。图像应出现在登录屏幕/框的中间;它是为那个做演示的人做的，但我不得不改变他的CSS以使其略微好一点。不过，图像不会居中。有没有人有任何见解？

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- Standard Meta Tags -->

        <!-- Bootstrap & Related Links-->

        <link rel="stylesheet" href="static/styles.css">

        <title>Project</title>
    </head>
    <body>
        <!-- cont is the entire box; changing its CSS changes its position on the page -->
        <div class="cont">
            <!-- box is the area that contains the image, username, and pass fields, but not the button bar and login buttons -->
            <div class="box">
                <!-- Creates the entire top row with close button and three circular buttons
                <div class="row top">
                    <div class="left">
                        <i class="fa fa-times close"></i>
                    </div>
                    <div class="right">
                        <i class=" fa fa-circle but one"></i>
                        <i class=" fa fa-circle but two"></i>
                        <i class=" fa fa-circle but three"></i>
                    </div>
                </div>
                -->
                <div class="row middle sg">
                    <div class="row pic sg">
                        <div class="col-md-4 col-md-offset-4">
                            <img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo">
                        </div>
                    </div>
                    <form action="#" class="form-horizontal form">
                        <div class="input-group y">
                            <span class="input-group-addon"><i class="fa fa-user use"></i></span>
                            <input type="text" class="form-control" placeholder="Username">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
                            <input type="password" class="form-control" placeholder="Password">
                        </div>
                    </form>
                </div>
                <div class="row base sg">
                    <h2 class="text-center login">Login</h2>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.cont {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    background-color: #2B2B35;
    width: 400px;
    border-radius: 10px;
}

.top {
    width: 100%;
    background-color: #24242E;
    margin: 0;
    border-radius: 10px 10px 0 0;
    padding: 0 15px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.close {
    padding: 18px 0;
    font-size: 20px;
    color: #fff;
}

.but {
    padding: 18px 0 18px 5px;
    font-size: 20px;
}

.but:hover {
    cursor: pointer;
}

.one {
    color: #F4CB61;
}

.two {
    color: #DB5594;
}

.three {
    color: #6451E8;
}

.photo {
    width: 200px;
    border-radius: 50%;

}

.sg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;

}

.pic {
    margin: 40px 0 30px 0;
}

.form {
    padding: 0 40px 40px 40px;
}

.login {
    padding: 12px 0;
    margin: 0;
}

.base {
    background-color: #3FA752;
    border-radius: 0 0 10px 10px;
    color: #fff;
}

.base:hover {
    cursor: pointer;
}

.base h2{
    font-weight: 600;
    font-size: 26px;
}

.user {
    color: #ccc;
}

.y {
    padding-bottom: 15px;
}

input[type=text],
input[type=password] {
    background: 0, 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #9446B6;
}

.input-group-addon {
    background: 0 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #9AA6B6;
}

.use {
    color: #9AA6B6;
}

input[type=text],
input[type=password]:focus{
    box-shadow: none !important;
    color: #FF3F3F;

}

Answer 1

更新：

删除这些类class="col-md-4 col-md-offset-4"并添加一个类以使图像居中，可以解决问题。

html, body {
    width: 100%;
    height: 100%;
}

.cont {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    background-color: #2B2B35;
    width: 400px;
    border-radius: 10px;
}

.top {
    width: 100%;
    background-color: #24242E;
    margin: 0;
    border-radius: 10px 10px 0 0;
    padding: 0 15px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.close {
    padding: 18px 0;
    font-size: 20px;
    color: #fff;
}

.but {
    padding: 18px 0 18px 5px;
    font-size: 20px;
}

.but:hover {
    cursor: pointer;
}

.one {
    color: #F4CB61;
}

.two {
    color: #DB5594;
}

.three {
    color: #6451E8;
}
.text-center {
  text-align: center;
}
.photo {
    width: 200px;
    border-radius: 50%;
    
}

.sg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;

}

.pic {
    margin: 40px 0 30px 0;
}

.form {
    padding: 0 40px 40px 40px;
}

.login {
    padding: 12px 0;
    margin: 0;
}

.base {
    background-color: #3FA752;
    border-radius: 0 0 10px 10px;
    color: #fff;
}

.base:hover {
    cursor: pointer;
}

.base h2{
    font-weight: 600;
    font-size: 26px;
}

.user {
    color: #ccc;
}

.y {
    padding-bottom: 15px;
}

input[type=text],
input[type=password] {
    background: 0, 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #9446B6;
}

.input-group-addon {
    background: 0 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #9AA6B6;
}

.use {
    color: #9AA6B6;
}

input[type=text],
input[type=password]:focus{
    box-shadow: none !important;
    color: #FF3F3F;

}

<html lang="en">
    <head>
        <!-- Standard Meta Tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Bootstrap & Related Links-->

        <link rel="stylesheet" href="static/styles.css">

        <title>Project</title>
    </head>
    <body>
        <!-- cont is the entire box; changing its CSS changes its position on the page -->
        <div class="cont">
            <!-- box is the area that contains the image, username, and pass fields, but not the button bar and login buttons -->
            <div class="box">
                <!-- Creates the entire top row with close button and three circular buttons
                <div class="row top">
                    <div class="left">
                        <i class="fa fa-times close"></i>
                    </div>
                    <div class="right">
                        <i class=" fa fa-circle but one"></i>
                        <i class=" fa fa-circle but two"></i>
                        <i class=" fa fa-circle but three"></i>
                    </div>
                </div>
                -->
                <div class="row middle sg">
                    <div class="row pic sg">
                        <div class="text-center">
                            <img src="https://placeimg.com/200/200/nature" alt="fleur-de-lis" class="photo">
                        </div>
                    </div>
                    <form action="#" class="form-horizontal form">
                        <div class="input-group y">
                            <span class="input-group-addon"><i class="fa fa-user use"></i></span>
                            <input type="text" class="form-control" placeholder="Username">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
                            <input type="password" class="form-control" placeholder="Password">
                        </div>
                    </form>
                </div>
                <div class="row base sg">
                    <h2 class="text-center login">Login</h2>
                </div>
            </div>
        </div>
    </body>
</html>

默认情况下，图片为inline-block元素，它们遵循常规流程，并且应以text-align为中心（在父级中设置）。

图片可以设置为display作为block元素，要将这些值设置为中心，必须设置宽度值（金额，百分比，...），以及左右边距设为自动。

.container {
  width: 100%;
}

.tex-center {
  text-align: center;
}

#inline-example {
  display: inline-block; /* Default value*/
}

#block-example {
  display: block;
  max-width: 200px;
  margin: 0 auto 0 auto;
}

<h3>Inline centered image</h3>
<div class="container tex-center"><img id="inline-example" src="https://placeimg.com/200/200/nature"></div>
<h3>Block centered image</h3>
<div class="container"><img id="block-example" src="https://placeimg.com/200/200/people"></div>

如何找出类似的CSS问题。使用Chrome的devtools（或类似的），我们可以看到左侧有一个边距推动图像。 col-md-4 col-md-offset-4都是用于网格设置的Bootsrap类，尝试和删除它们为我们提供了解决方案。

Answer 2

试试这个：

.photo {
    width: 200px;
    border-radius: 50%;
    display: block;
    margin: auto;
}

要将图片置于div中心，通常应将display设置为block，将margin设置为auto上的img。

Answer 3

如果您正在谈论此图片<img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo">，那么您应该添加到“照片”类：

display:block;
margin: 0 auto;

确保其他CSS不会阻止这些行工作，并且您的图像应该在col-element中居中。

Answer 4

您的图片位于偏移列中，删除列类（事件整数div）并且所有内容都适用于：

.photo {
    display: block; // defining element as block
    margin: 0 auto; // and auto side margin
    width: 200px;
    border-radius: 50%;
}

实施例： https://codepen.io/themeler/pen/QqNpWv

图像不以引导程序为中心

4 个答案: