以溢出为中心包含文本在容器div中的跨度

Question

我有一个40px x 40px的容器div。其中有一个锚点，其中包含一个与容器尺寸相同的img，在img下方包含一行文本。我正在寻找与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; 
} 

Answer 1

你可以只添加CSS变换，DRA跨度回到它自己的宽度的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>