Search code examples
htmlimagetagsblockquote

position clickable image within blockquote


I want to center a clickable image within a blockquote; actually 2 blockquotes; I've separated the quote into 2 pieces to see if that worked better. I can't get the image to respond to style changes. I've used a div tag in the code I've provided here, but also tried no div tag, and just changed the image attributes to adjust the left margin, but that didn't work either. Have I done something wrong? All I want to do is move the image to the right so it is centered under and above the quoted text.

<blockquote><p><i>&quot;Society attacks early, when the individual is helpless. It enslaves him almost before he has tasted freedom."</i></p></blockquote>
<br>

<div
style="
  top: 99;
  left: 199;
  position: absolute;
  z-index: 1;
  visibility: show;">
<a href="images/society-attacks-early.png" title="Click For Larger View..." imageanchor="1" target="_blank" ><img src="images/society-attacks-early.png" alt="society-children" width="350" height="150" id="society-children"/></a>
</div>
<blockquote><p><i>&quot;...Considering how long society has been at it, you'd expect a better job. But the campaigns have been badly planned and the victory has never been secured.”</i><br><a href="https://rads.stackoverflow.com/amzn/click/com/0872207781" rel="nofollow noreferrer" title="Purchase Walden Two from Amazon.com" onclick="window.open(this.href,'newwin'); return false;">B. F. Skinner</a></p></blockquote>
<br>

Solution

  • You could use text-align:center for the div containing the image. I've just created a Fiddle as example.