title: HTML/CSS - How do I align three different elements in different way in a heady
body: <p>I have researched this problem for several days now and have found no solution so far. If this is just a beginners questions with a lot of answers out there I apologise, and please point me in the right directions.</p>
  
  <p>I am trying to developp a "Headline" or "Banner" to be displayed at the top of my  website.</p>
  
  <p>I have a colored box, in which i want to display an image (a little off the left side), right next to it some text (the name of the website) and then centered in the middle of the box again some very short text (the name of the document, Home, Contact, things like that).</p>
  
  <p>So it should look like this:</p>
  
  <p>&lt;-space->&lt;-Image->&lt;-Website name->&lt;----------centered text------------------------></p>
  
  <p>So far whatever I have tried just gets me this:</p>
  
  <p>&lt;-space->&lt;-Image->&lt;-Website name->&lt;-text at the left---------------------------------></p>
  
  <p>I am currently using a div element for the box with three different elements so i can format them separately in the style sheet. The main problem seems to be that the last header (Centered Text) is just created around the text, and not until the right edge of the box. So aligning left, right or in the center makes no difference. </p>
  
  <pre><code>&lt;div class="box blue-box "&gt;
    &lt;img class="icon" src="file://C:/Users/jafa/Desktop/juggling/website/images/white_design.png" alt="icon"&gt;
    &lt;h8 class="white-text-header"&gt;Website name &lt;/h8&gt;
    &lt;h9 class="white-text-main-header"&gt; Centered Text&lt;/h9&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with css style sheet:</p>
  
  <pre><code>&lt;style&gt;
  
    .blue-box {
      background-color:  #401841;
      padding: 10px;
      border:1px solid white;
      border-radius: 4px;
  
    .white-text-header {
      font-family: Arial;
      color: white;
      font-size: 24;
      vertical-align: middle;
      text-align: left;
    }
  
    .white-text-header {
      font-family: Arial;
      color: white;
      font-size: 24;
      vertical-align: middle;
      text-align: center;
    }
  
  
    img.icon{
      width: 120px;
      height: auto;
      align-items: left;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>If anyone knows a better solution, I would be very grateful. Thank you for spending your time helping me.</p>