Question

我试图在图片上放一些文字，但我不想设置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;
    }

Answer 1

尝试这样的事情。

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

这是workin jsfiddle

Answer 2

/* 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）

试试这个。希望它有所帮助！

Answer 3

请尝试以下操作，将您的父元素即.col-xs-12位置设为position:relative，将子.competion_text位置设为position:absolute，这样您的文字就会在图像中心对齐，现在我在顶部定位中使用了CSS calc() function，使其在中心垂直对齐，并始终保持在那里。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将文字放在图片上以适应响应页面

3 个答案: