Question

我有一个40px x 40px的容器div。在其中有一个锚，其中包括一个与容器尺寸相同的img，在img下面是一个包含一行文本的span。我希望用img水平居中文本。我已经尝试将容器设置为tex-align：center，使用位置元素进行操作，并将边距设置为auto。任何帮助，将不胜感激。

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变换来将跨度缩回50％的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

将溢出中心包含在容器div中的文本中心

1 个答案: