在溢出时将包含容器 div 中的文本的跨度居中答案

【问题标题】：Center a span which includes text in a container div when in overflow在溢出时将包含容器 div 中的文本的跨度居中
【发布时间】：2016-02-02 12:13:33
【问题描述】：

我有一个 40px x 40px 的容器 div。在其中有一个锚点，其中包含一个与容器具有相同尺寸的 img，并且在 img 下方，一个包含一行文本的 span。我希望将文本与 img 水平居中。我尝试将容器设置为 tex-align: center，玩弄位置元素，并将边距设置为自动。任何帮助，将不胜感激。

HTML：

<div class="crsContainer">
    <a class="crsIcon" onclick="return false">
        <img id="" src="'.$crsRow['iconURL'].'"/>
    </a>
    <span class="crsTitle">'.$crsRow['courseTitle'].'</span>
</div>

CSS：

.crsContainer{
   width: 40px;
   height: 40px;
   position: absolute;
   -webkit-transition: all 1s;
   text-align: center;
   cursor: pointer;
   display: inline-block;

 }

 .crsIcon{
     position: relative;
     display: inline-block;

 }

 .crsTitle{
     position: relative;
     top: 5px;
     white-space: nowrap;
     margin: 0 auto;
     color: #3d3d3d;
     text-align: center;
 }

【问题讨论】：

您能给我们提供一个小提琴或发布您渲染的 HTML 吗？

标签： html css

【解决方案1】：

您可以添加一个 CSS 变换来将跨度拉回其自身宽度的 50%。

.crsContainer {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%; /* for demo purposes */
  -webkit-transition: all 1s;
  text-align: center;
  cursor: pointer;
}

.crsIcon {
  position: relative;
  display: inline-block;
}

img {
  display: block;
}

.crsTitle {
  position: relative;
  top: 5px;
  white-space: nowrap;
  color: #3d3d3d;
  text-align: left;
  display: inline-block;
  transform: translateX(-50%);
  border: 1px solid grey;
}

<div class="crsContainer">
    <a class="crsIcon" onclick="return false">
        <img id="#" src="http://lorempixel.com/output/city-q-c-40-40-4.jpg"/>
    </a>
    <span class="crsTitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, amet.</span>
</div>

【讨论】：