如何将文本上方的文本保持在任何宽度的正中心

Question

嗨，我正在尝试将文本保持在圆形图像的中心，我尝试使用以下代码将其设置为中心，但是当我调整窗口大小或将视图更改为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是

.city-name{
    font-family: 'open_sansbold';
    font-size: 32px;
    color: white;
    position: absolute;
    top: 50%;
    left: 46%;
    text-align: center;
    /* font-size: 2rem; */
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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

这是FiddleDemo

Answer 1

只需给出以下CSS：

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

将.city-name left属性更改为left: 50%;

并给h4 margin:0 。

工作小提琴

Answer 2

绝对位置和相对位置

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

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

而且您的CSS应该如下所示：（我为每条重要的CSS规则都写了注释）

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. */
}

实时示例： https ： //jsfiddle.net/w9L44gwL/1/

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