Question

我正在使用商店图片构建网站，尽管有些商店没有可用的图片。我能做的最好的事情是使用其占位符文本来显示商店标题。但是，默认情况下，占位符文本位于div的左上角，并且没有样式。

如何定位占位符文本以对其进行样式化？

更新

好吧，也许我应该提一下我正在使用WordPress。也许使用一个简单的PHP if else语句就足够了？显示img是否存在，否则显示我可以添加的h4元素。

Answer 1

您可以直接在img上设置一些属性：

img {
  color:red;
  font-size:20px;
  text-align:center;
  line-height:200px;
}

<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>

Answer 2

将文本放入a并为其设置样式，就像对待任何其他html元素一样。

<div class="store-title">
This is where the store name goes.
</div>

如果文本已经进入HTML元素，则无法修改，您必须使用现有的类或ID来连接它并设置样式。

您也可以设置<img>元素的样式。

Answer 3

您可以使用line-height垂直居中：

HTML

<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />

CSS

img.no-image {
  color: red;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
}

JSFiddle演示：https://jsfiddle.net/ugr6gp8n/2/

以下是另一种设置替代文字样式的方法，但它仅适用于Chrome，因此不建议使用：

HTML

<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />

CSS

img[title] {
  position: relative;
}

img[title]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: red;
  line-height: 200px;
  text-align: center;
  content: attr(title);
}

JSFiddle演示：https://jsfiddle.net/cxa37mLd/1/

来源：

Answer 4

更新2

好的，这已经解决了

HTML / PHP：

  <?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>

  <div class="col-xs-12 col-sm-6 col-md-4">
    <a class="store-item-link" href="<?php the_permalink(); ?>">
      <div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
        <?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>

          <h3><?php the_title(); ?></h3>

        <?php else: ?>

          <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">

        <?php endif; ?>
/* Ending here */
      </div>
    </a>
  </div>

  <?php endwhile; endif; ?>

CSS

    h3{
    margin:  0;
    font-weight: bold;
    font-size: 3rem;
    line-height: 175px;
    text-align: center;
  }

这很有效，感谢大家的想法。

是否可以设置<img/>元素的占位符文本的样式？

4 个答案: