Separate image alignment

How can I align my image to the right in this situation? Right now I am using text align on the <div> to center everything within. I get why everything centers becuase they are all by default inline element. I am able to target p, h1, h2 etc but not the <img>, that is different an only changes by the CSS properties of the div wrapping it. So what should I do here?

Simplest solution:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image alignment</title>
    <style>
    	#elixirs{
    		text-align: center;
    		width: 200px;
    	}
    	.specialImg{text-align:left}
     </style>
  </head>
  <body>
  	<div id="elixirs">
      <h2>Weekly Elixir Specials</h2>
	  <p class="specialImg" ><img src="yellow.gif" alt="Lemon Breeze Elixir"></p>
	  <h3>Lemon Breeze</h3>
	  <p>
	    The ultimate healthy drink, this elixir combines
	    herbal botanicals, minerals, and vitamins with
	    a twist of lemon into a smooth citrus wonder
	    that will keep your immune system going all
     day and all night.
	  </p>
  	</div>
  </body>

but maybe this is the layout you were hoping for:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image alignment</title>
    <style>
    	#elixirs{
    		width: 180px;
    		padding:9px;
    		border:1px solid pink;
    	}
    	#elixirs h2{text-align: center; margin-top:0}
    	.specialImg{float:left;margin:0; padding:0 }
    	#elixirs h3   {overflow:hidden;  padding:0 10px; }
     </style>
  </head>
  <body>
  	<div id="elixirs">
      <h2>Weekly Elixir Specials</h2>
	  <p class="specialImg" ><img src="yellow.gif" alt="Lemon Breeze Elixir"></p>
	  <h3>Lemon Breeze</h3>
	  <p>
	    The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night.
	  </p>
  	</div>
  </body>

hope that helps