Is it possible to style the placeholder text of the <img> element?

Question

I'm building site a with store images, although some stores don't have an available image. The best I can do is use its placeholder text to display the store title. However, by default the placeholder text is located at the top left of the div and is unstyled.

How can I target the placeholder text to style it??

UPDATE

Ok, maybe I should mention that I'm using WordPress. Perhaps using a simple PHP if else statement would suffice?? Show img if it exists, else show h4 element that I can add in.

Answer 1

You can use line-height to vertically center:

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 demo: https://jsfiddle.net/ugr6gp8n/2/

Here's another way to style alt text but it only works in Chrome so it's not recommended:

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 Demo: https://jsfiddle.net/cxa37mLd/1/

Sources:

• Can I style an image's ALT text with CSS?

• Positioning image alt text

• CSS :after not adding content to certain elements

• Why doesn't line-height work on img elements?

Answer 2

Put the text into a and style it as you would for any other html element.

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

If the text is already into an HTML element you can not modify you will have to use existing class or id to hook up to it and style it.

Of you can style the <img> element as well.

Answer 3

You can style some properties directly on 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 4

UPDATE 2

Ok this is resolved

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

This worked great and thanks everyone for your ideas.