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.
#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;
}
<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 -->