Question

                    <div class="row">
                        <div class="col-md-4">
                            <div class="laptop">
                                <img src="images/laptop.png" alt="" style="width: 16em;">
                                <p class="laptop-para">Météo Ravageurs Pytosanitaire</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="laptop">
                                <img src="images/laptop.png" alt="" style="width: 16em;">
                                <p class="laptop-para">Collecte et transmission de données</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="laptop">
                                <img src="images/laptop.png" alt="" style="width: 16em;">
                                <p class="laptop-para">Systèmes Electriques de commande</p>
                            </div>
                        </div>
                    </div>

我有3个笔记本电脑图像和段落。我想将文本置于每个图像的中心是否有任何简单的方法来做定位？

Answer 1

只需使用笔记本电脑图片作为您的div的背景：

background-image: url('./background-image.png');

您可以通过

调整其位置

background-position-x
background-position-y

性质。

您可以通过

将文本置于div中

text-align: center;

Answer 2

试试这个：

.laptop {
  position: relative;
  text-align: center;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #000;
  text-align: center;
  color: #FFF;
  background-color: rgba(0,0,0,0.5);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-4">
    <div class="laptop">
      <img src="https://www.thinkingtech.in/wp-content/uploads/2017/06/razer-blade-hero-laptop-v2-1.png" alt="" style="width: 16em;">
      <p class="laptop-para">Météo Ravageurs Pytosanitaire</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="laptop">
      <img src="https://images-na.ssl-images-amazon.com/images/I/81p8pWMLI5L._SX425_.jpg" alt="" style="width: 16em;">
      <p class="laptop-para">Collecte et transmission de données</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="laptop">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxoLOxqQJVbNVeY3w07pF8pK56mJFAgE6Xi_C0GkLuYRtsXE2t" alt="" style="width: 16em;">
      <p class="laptop-para">Systèmes Electriques de commande</p>
    </div>
  </div>
</div>

Answer 3

这是给你的代码：

<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Vojtěch Matras">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid img-fluid">
  <div class="row">
    <div class="col-4"></div> 
    <div class="col-4" style="max-width: 100%; height: auto;"><img src="5.jpg"></div>
    <div class="col-4"></div>
</div>
<div class="row">
    <div class="col-4"></div> 
    <div class="col-4"><center>you text goes here</center></div>
    <div class="col-4"></div>
</div>

<div class="row">
    <div class="col-4"></div> 
    <div class="col-4" style="max-width: 100%; height: auto;"><img src="5.jpg"></div>
    <div class="col-4"></div>
</div>
<div class="row">
    <div class="col-4"></div> 
    <div class="col-4"><center>you text goes here</center></div>
    <div class="col-4"></div>
</div>
<div class="row">
    <div class="col-4"></div> 
    <div class="col-4" style="max-width: 100%; height: auto;"><img src="5.jpg"></div>
    <div class="col-4"></div>
</div>
<div class="row">
    <div class="col-4"></div> 
    <div class="col-4"><center>you text goes here</center></div>
    <div class="col-4"></div>
</div>
</div>
</body>

</html>

你可以checkjsut调整窗口大小：https://jsfiddle.net/k3tt2qa4/

重叠图片上的文字css

3 个答案: