如何在Span中居中放置图像

Question

如何在<span>标签中居中显示图像？

<div class="col-1">
     <span class="dot">
           <h:graphicImage library="imgs" name="campus.png" width="25" height="25" style="align-content-center"/>
     </span>
</div>

点 CSS

.dot {
     height: 75px;
     width: 75px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
}

不用担心h:graphicImage，它是一个 JSF 标记，可以转换为html中的<img>。任何html类都可以应用于它。

我正在使用Bootstrap 4.3。

Answer 1

.dot {
     display: block;
     margin-left: auto;
     margin-right: auto;
}

<div class="container">
<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"><img class="dot" src="campus.png"/></div>
  <div class="col-sm-4"></div>
</div>

Answer 2

尝试显示Flex并对齐项目，然后将内容对齐居中。

.dot {
 height: 75px;
 width: 75px;
 background-color: #bbb;
 border-radius: 50%;
 display: flex;
 align-items:center;
 justify-content:center;

 }

Answer 3

我尝试了一下，我无法发表评论，所以我不得不对此进行编码。我使用了position: absolute。希望这会有所帮助！

.dot {
  height: 75px;
  width: 75px;
  background-color: #bbb;  
  border-radius: 50%;
  display: inline-block;
}

.campus {
  position: absolute;
  top: 11.5%;
  left: 8%;
  transform: translate(-50%, -50%)
}

<div class="col-1">
     <span class="dot">
           <img src="https://pngimage.net/wp-content/uploads/2018/05/campus-png-5.png" width="25" height="25" style="align-content-center" class="campus"/>
     </span>
</div>