将文本放在图片上以适应响应式页面答案

【问题标题】：Put text over picture to fit responsive page将文本放在图片上以适应响应式页面
【发布时间】：2016-10-11 18:04:42
【问题描述】：

我试图在图片上添加一些文字，但我不想设置background-image。

我创建了一个jsfiddle 来说明我所做的事情，并且我使用了 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>

CSS

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

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案1】：

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.holder {
  position: relative;
  width: 230px;
  margin: 0 auto;
}

.competion_text {
  position: absolute;
  top: 180px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #FFCF83;
  font-size: 10pt;
  z-index: 2;
}

<div class="col-xs-12 visible-sm-block visible-xs-block holder" 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>

我在父级上放置了另一个类。 (.holder)

试试这个。希望对您有所帮助！

【讨论】：

谢谢，但是margin: 0 auto; 是什么意思？
将元素居中到父元素。很高兴我帮助了:)

【解决方案2】：

试试这样的。

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

这里正在工作jsfiddle

【讨论】：

【解决方案3】：

尝试如下，设置你的父元素，即.col-xs-12位置为position:relative，子元素，即.competion_text位置为position:absolute，这样你的文本在图像中心对齐，现在我使用了CSScalc() function在顶部位置以将其垂直对齐在中心并且始终保持在那里。

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.col-xs-12{
  width:auto;
  height:auto;
  margin:auto;
  text-align:center;
  position:relative;
}
.col-xs-12 > .competion_text {
        position: absolute;
        top: calc(100% - 30%);
        left: 0;
        width: 100%;
        height:auto;
        color: #FFCF83;
        font-size: 10pt;
        text-align:center;
    }

<div class="col-xs-12 visible-sm-block visible-xs-block">
        <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>

【讨论】：

谢谢，它也可以。为什么要将width、height 和margin 设置为auto？