Question

我正在尝试将图像和div层居中包含的div居中，但到目前为止，我无法使它从列的左侧移动。我尝试了几种不同的方法，但无法使其移动。甚至是margin自动技巧都不起作用，我怀疑这是因为bootstrap 4现在是一个flex box。

HTML ：

#user-avatar {
    background: #ff4e00;
    border-radius: 50%;
    width: 250px;
    margin-bottom: 25px;
    position: relative;
}

#user img {
    border-radius: 50%;
    width: 250px;
    transition: .5s ease;
    backface-visibility: hidden;
}

#user-avatar:hover img {
    cursor: pointer;
    opacity: 0.3;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.middle i {
    font-size: 34px;
}

#user-avatar:hover .middle {
    opacity: 1;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
    <div class="col-12" id="user-avatar">
        <img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
        <div class="middle">
            <i class="fas fa-camera-alt"></i>
            <p>Edit Avatar</p>
        </div>
    </div>
    <p id="username" class="text-center"><span>Howdy </span>Liane</p>
    <div id="xp-bar" class="text-left">
        <div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
    </div>
    <p id="stats" class="text-right">Level 1</p>
</div>

这是图像和我需要位于中间的“底图”（“中间” div）。

Answer 1

Add margin-left: 50% and transform: translateX(-50%) to #user-avatar. check below link. thank you

http://jsfiddle.net/x1hphsvb/10994/

Answer 2

将id="user-avatar"上的课程添加到mx-auto

<div class="col-12 mx-auto" id="user-avatar">
        <img class="d-block" src="assets/users/av-lg/liane.png" />
        <div class="middle">
            <i class="fas fa-camera-alt"></i>
            <p>Edit Avatar</p>
        </div>
    </div>

https://jsfiddle.net/lalji1051/v06j8orn/9/

Answer 3

simply add this style - centrd now

#user-avatar {
    margin: 0 auto;
}

Bootstrap 4中的中心图像和Div参考底图

3 个答案: