title: How to center align an inlined image in Bootstrap?
body: <p>I have a drop down button and a responsive image in the same line with the below code.</p>
  
  <pre><code>&lt;div class="container dropdown "&gt;
      &lt;a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"&gt;
          &lt;span class="icon-bars-button"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Option1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Option2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Option3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;img class="img-responsive div-inline" src="res/test.png" alt="Logo"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.div-inline{
      display:inline-block;
  }
  </code></pre>
  
  <p>The image gets displayed right next to drop down button. I want it to be in the center of the row.
  Attached an image, the result is as in top of the image. I want it as in the below portion of the image.</p>
  
  <p><a href="https://i.stack.imgur.com/zOdy0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zOdy0.png" alt="Sample image"></a></p>