如何在跨度中居中图像[重复]答案

【问题标题】：How to center image in Span [duplicate]如何在跨度中居中图像[重复]
【发布时间】：2019-08-22 06:32:27
【问题描述】：

如何使<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。

【问题讨论】：

您是否尝试过使用 text-align:center 或 margin:0 auto ？
将text-align:center 应用于<h:graphicImage> 只会将图像水平居中对齐。
加上vertical-align:middle

标签： html css bootstrap-4

【解决方案1】：

尝试 Display Flex 并对齐项目并将内容对齐到中心。

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

 }

【讨论】：

【解决方案2】：

.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>

【讨论】：

这是什么span4？
@FaizanMubasher w3schools.com/bootstrap/bootstrap_grid_basic.asp

【解决方案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>

【讨论】：