Html 将文本放在图片上以适合响应页面

我试图在图片上添加一些文字，但我不想设置背景图像

我创建了一个示例来说明我所做的工作，并使用bootstrap3

在手机大小上，它可以显示精美的图像

但如果我调整浏览器宽度，它将被破坏

html

<div class="col-xs-12 visible-sm-block visible-xs-block" style="text-align: center;">
    <p class="competion_text">
        This is inside the competiontion Box!
        <br> Second line
        <br> Third line
    </p>
    <img src="http://i.imgur.com/NajXOdH.png">
</div>

---

试试这样的

.competion_text {
    text-align: center;
    position: relative;
    top: 252px;
    margin: 0 auto;
    max-width: 225px;
    color: #FFCF83;
    font-size: 10pt;
}

---

这里是工作中的

试试这样的东西

.competion_text {
    text-align: center;
    position: relative;
    top: 252px;
    margin: 0 auto;
    max-width: 225px;
    color: #FFCF83;
    font-size: 10pt;
}

这里是工作时间

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.持有人{
位置：相对位置；
宽度：230px；
保证金：0自动；
}
.比赛文本{
位置：绝对位置；
顶部：180像素；
左：0；
宽度：100%；
文本对齐：居中；
颜色：#FFCF83；
字号：10pt；
z指数：2；
}

这是在竞赛箱里面！

第二线

第三行

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.持有人{
位置：相对位置；
宽度：230px；
保证金：0自动；
}
.比赛文本{
位置：绝对位置；
顶部：180像素；
左：0；
宽度：100%；
文本对齐：居中；
颜色：#FFCF83；
字号：10pt；
z指数：2；
}

这是在竞赛箱里面！

第二线

第三行

尝试如下操作，将父元素设置为

。col-xs-12

位置设置为

位置：相对

，子元素设置为

。competition\u text

位置设置为

位置：绝对

，这样可以将文本对齐在图像中心，现在我使用了CSS

calc（）功能

位于顶部位置，使其在中心垂直对齐，并且始终保持在那里

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.col-xs-12{
宽度：自动；
高度：自动；
保证金：自动；
文本对齐：居中；
位置：相对位置；
}
.col-xs-12>.competition_text{
位置：绝对位置；
顶部：钙（100%-30%）；
左：0；
宽度：100%；
高度：自动；
颜色：#FFCF83；
字号：10pt；
文本对齐：居中；
}

这是在竞赛箱里面！

第二线

第三行

尝试如下操作，将父元素设置为

。col-xs-12

位置设置为

位置：相对

，子元素设置为

。competition\u text

位置设置为

位置：绝对

，这样可以将文本对齐在图像中心，现在我使用了CSS

calc（）功能

位于顶部位置，使其在中心垂直对齐，并且始终保持在那里

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.col-xs-12{
宽度：自动；
高度：自动；
保证金：自动；
文本对齐：居中；
位置：相对位置；
}
.col-xs-12>.competition_text{
位置：绝对位置；
顶部：钙（100%-30%）；
左：0；
宽度：100%；
高度：自动；
颜色：#FFCF83；
字号：10pt；
文本对齐：居中；
}

这是在竞赛箱里面！

第二线

第三行

谢谢，但是什么是

页边距：0自动平均值？居中元素到父元素。很高兴我帮了忙：）谢谢，但是
margin:0auto平均值？居中元素到父元素。很高兴我帮了忙：）谢谢，它也能用。为什么要将
宽度
、
高度
和
边距
设置为
自动
？谢谢，它也可以工作。为什么将
宽度
、
高度
和
边距
设置为
自动
？