CSS如何让<p>标签在响应式网站的图像中保持其中心？答案

【问题标题】：CSS how to have a <p> tag maintain its center within a image in a responsive website?CSS如何让<p>标签在响应式网站的图像中保持其中心？
【发布时间】：2015-05-26 12:44:31
【问题描述】：

我有一个响应式网站，其中包含一个数字，如下所示：

当我减小浏览器的大小时，图像会变小。我的问题是当浏览器减少时，数字不会跟随图像。当浏览器达到其可能的最小尺寸时，数字与图像的位置不同。我应该怎么做，当我减小浏览器的大小时，数字会跟随图像并在图像中居中？

这是 PHP 代码：

    <div class="container">
    <div class="twelve columns">


    <!-- Number inside the ribbon -->
    <div class="number">
    <p>

    <?php
        $row = mysqli_fetch_assoc($result);
            if($row) {
                echo "{$row['Referrals']}";
        } 
    ?>

    </p>
    </div>
    <div class="redribbon"><img src="images/red.png" alt="redribbon"/></div>
    </div>
    </div>

CSS 代码

.number{
    float:left;
    background-position: center;
    text-align: center;
    font-size:200%;

    }

.number p{  
    position:absolute;
    top: 38%;
    left:57%;
    z-index:999;    
    }

.container .twelve.columns{
    height:150px;

    display:inline-block;
}

.redribbon{
    position:absolute;
    top:-5%;
    left:45%;
}

.redribbon img{
    height:100%;
    width:100%;
}

.twelve.columns                 { width: 100%; margin-left: 0; }

【问题讨论】：

标签： php html css image

【解决方案1】：

您需要稍微重新安排结构，并且无需媒体查询即可完成此操作。看看下面的小提琴有一个基本的想法，中间的数字是蓝色的。您可能需要创建一个媒体查询来更改font-size。

FIDDLE

<div class="container">
<div class="twelve columns">
    <div class="redribbon">
        <div class="number">
            <p>767</p>
        </div>
        <img src="http://i.stack.imgur.com/DVReT.png" alt="redribbon" />
    </div>
</div>

.redribbon{
    position:relative;
    width: 55%
}

.redribbon img {
  width: 100%;
}

.number {
  position: absolute;
  top: 46%;
  width: 100%;
  text-align: center;
}

.number p {
  font-weight: bold;
  font-size: 20px;
  color: blue;
}

p{
    margin: 0;
    padding: 0
}

【讨论】：

【解决方案2】：

你必须在你的 CSS 中使用媒体查询来为不同的设备缩小它。更多参考：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

示例：

@media (max-width: 320px) {
    .number p{  
        font-size:120%;
    }
}

@media (min-width: 321px) and and (max-device-width: 768px)  {
    .number p{  
        font-size:175%;
    }
}

等等等等~

【讨论】：

这不是真的，请看我的回答。

【解决方案3】：

您发布的代码不清楚您在哪里执行响应式操作以缩小图像。所以，我只专注于让数字在图像中居中。

<html>
<head>
    <title>Ribbon</title>

    <style type="text/css">

        .container .twelve.columns{
            display: inline-block;
            }

        .redribbon{
            width: 284px;
            height: 207px;
            background: transparent url('DVReT.png') 50% 50% no-repeat;
            background-size: cover;
            }

        .number{
            width: 284px;
            text-align: center;
            line-height: 207px;
            font-size:200%;
            }

    </style>

</head>
<body>

    <div class="container">
        <div class="twelve columns">

        <!-- Number inside the ribbon -->
        <div class="redribbon">
            <div class="number">273</div>
        </div>

        </div>
    </div>

</body>
</html>

将功能区图形设为背景图像可以轻松地将数字叠加到其上。 .redribbon 框的行高应该反映@media 指令中.number 框的高度，这将使图像和数字响应浏览器窗口大小。

【讨论】：