Question

我对图像的绝对位置和相对位置有疑问。当然可以解决响应问题。

我需要你帮助我。这是我想要的屏幕截图

非常感谢

src

Answer 1

您在这里：

更改：

.img-google {
   position: absolute;
   bottom: 190px;
   width: 150px;
 }

和

.card {
   top: 100px;
   background-color: #42145F;
 }

收件人：

.img-google{
    position: relative;
    top: -40px;
    width: 150px;
    display: block;
    margin: auto;
}
.card {
    margin: auto;
    width: 70%;
    background-color: #42145F;
    text-align: center;
    color: white;
 }

https://jsfiddle.net/mcsd4e03/13/

Expln：

要使图像中心对齐：
display：block;
margin：自动;
绝对位置和相对位置之间的差异：
https://www.lifewire.com/absolute-vs-relative-3466208 1
要使文本中心对齐并用白色显示
text-align：center;
颜色：白色；

希望这会有所帮助！！

Answer 2

.img-containerz {
        height: 25px;
        text-align: center;
        font: 0/0 a;
    }
     .img-elementz {
        display: inline-block;
        vertical-align: middle;
        font: 12px/1 open sans Helvetica Neue;
    }

<!DOCTYPE html>
<html lang="en">
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="col-lg-12">
    <div class="img-containerz text-center">
    	<div class="img-elementz">
    		<img class="img-responsive" src="https://img.bfmtv.com/c/630/420/6ea/978bb45ee10aae30b26393fdd58f6.png" style="max-height:50px;z-index:1">
    	</div>
       
    </div>
    <div class="card text-white" style="z-index:-1;">
       <h5 class="card-text" style="color:grey">
        Lorem
      </h5>
      <p class="card-text" style="color:grey">
         Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de
    texte pour réaliser.  </p>
       </div>
    </div>
    </body>
</html>

Bootstrap 4：img中心的相对位置

2 个答案: