Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de `display:inline-block` e usei a propriedade `line-height` com `vertical-align:middle` deixando assim a imagem centralizada na DIV e também o HR.   

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

    <div id="bola" class="alinhar">
      <h4>Bibliotecas</h4>
    </div>
    <div id="bola2" class="alinhar">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" />
      <hr></hr>
    </div>

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    #bola {
      display: inline-block;
      width: 15%;
      font-size: 22px;
      font-weight: bolder;
    }
    #bola2 {
      display: inline-block;
      margin-left: 20px;
      width: 70%;
      line-height: 60px;
    }
    #bola2 img {
      vertical-align: middle;
    }
    hr {
      vertical-align: middle;
      margin-left: -7px;
      background-color: #D19D1C;
      height: 3px;
      border: none;
      width: 70%;
      display: inline-block;
    }

<!-- end snippet -->