Html 如何使图像上的文本在任意宽度的正中心

您好，我正在尝试将文本保持在圆圈图像的中心，我已经尝试使用以下代码，现在它是中心，但当我调整窗口大小或将视图更改为ipad、iphone时，它会向左移动，我们可以管理任何屏幕宽度的文本精确中心吗？ 这是我的密码

            <div class="img-div-1 col-md-4 col-sm-4 col-lg-4 col-xs-12">
                <img class="img-circle img-responsive" src="http://placehold.it/250x250" alt="">
                <h4 class="city-name">MONTREAL</h4>
            </div>
            <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 img-div-2">
                <img class="img-circle img-responsive" src="http://placehold.it/250x250" alt="">
                <h4 class="city-name">PRAGUE</h4>
            </div>
            <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 img-div-3">
                <img class="img-circle img-responsive" src="http://placehold.it/250x250" alt="">
                <h4 class="city-name">NEW YORK</h4>
            </div>

我想在任何屏幕的中央保持图像上的文本，而不编写自定义代码，如为每个屏幕调整的媒体查询。如果可能，请提供一些建议。非常感谢您的来访

---

这里是

只需给出以下css：

.img-div-1, .img-div-2, .img-div-3 {
 display: table-cell;
 position: relative;
 width: auto;
}

更改。城市名称左移物业：50%

并给出h4的裕度：0

绝对和相对位置 使用绝对位置时，请记住，始终需要相对位置来包含它。 因此，您的HTML应该如下所示：

<div class="… relative"><!-- Relative position -->
    <img src="example.jpg" alt="">
    <h4 class="city-name">MONTREAL</h4> <!-- Absolute position -->
</div>

实例：

---

如果你喜欢我的答案，请选择它来批准它。谢谢。

它不工作，请只登记小提琴，它不在center@SudarshanKalebere我可以在中间看到。请再次检查，因为给定的宽度：自动，在引导col-md-4和sm中，lg不采用实际宽度，并且有4张图片为我排成一行。是的，文本居中，但如何保持引导标准宽度不需要宽度：自动，它在行中拍摄4幅图像检查这一幅我总共有9幅图像，每行3幅图像我放置@SudarshanKalebere，我认为你应该更改html。

<div class="… relative"><!-- Relative position -->
    <img src="example.jpg" alt="">
    <h4 class="city-name">MONTREAL</h4> <!-- Absolute position -->
</div>

div img{ /* This is for image fluid resizing. */
  width: 100%;
  height: auto;
}

.relative{ position: relative; }
.city-name{
    font-family: 'open_sansbold';
    font-size: 32px;
    color: white;
    position: absolute; /* Every absolute position should be contained by a relative position. */
    top: 0; /* Every position is set to 0. */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* This will let your text be seen every time. */
    margin: auto; /* Margin will do the trick to center the content. */
    width: 100%; /* Width and Height is needed to let positions center the content. */
    height: 30px;
    text-align: center; /* Text align center because we used width: 100%; so we could writte any size text and it will be centered. */
    line-height: 1em; /* This is not important. */
}