Question

这是一个小提琴，我发现我很想知道如何调整＆＃34;名称＆＃34;到图像的中心...香港专业教育学院尝试使用宽度：100％;并离开：0; / right：0;没有成功..我只使它对齐所有3个图像的中心。

HTML：

<div id="design-cast">
 <h4>Design</h4>

<div class="member">
    <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
    <div class="name">Name
        <br />Description</div>
</div>
<div class="member">
    <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
    <div class="name">Name
        <br />Description</div>
</div>
<div class="member">
    <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" />
    <div class="name">Name
        <br />Description</div>
</div>

Answer 1

.name {
    /* position: absolute; */*remove this line*/
    bottom: 0px;
    text-align: center;
}

Answer 2

要执行此操作，请将您的css代码更新为：

.name {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 31%;
}

下次请查看bootstrap或其他网格系统，在这种情况下使用position: absolute;是魔鬼的工作。

Answer 3

将您的.name课程更新为

.name {
    bottom:0px;
    text-align: center
}

Answer 4

{ "name": "Robert", "food": "Pizza", "testgroup": { "test": null } }

.member {
  position: relative;
  text-align: center;
}

.member .name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 5

您可以使用text-align:center CSS属性。以下是更新的name类

.name {
    //position:absolute; // Remove this
    bottom:0px;
    text-align:center;
}

我想在如何将名称与这些图像的中心对齐方面提供一些帮助

5 个答案: