Позиционирование изображения

Question

У меня проблема с позиционированием изображения. Я хотел бы поместить его в левую часть div с классом .brand. Вот код, который используется на веб-странице:

<div class="container"> 
    <img class="img-responsive brand-img" src="img/logo.png" alt=""> 
    <div class="brand">MG STAV</div>  
    <div class="address-bar"> stavební, spol. s.r.o.</div> 
</div> 

.brand-img{ 
    text-align: center; 
} 

.brand { 
     display: inherit; 
     margin: 0; 
     padding: 30px 0 10px; 
     text-align: center; 
     text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
     font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size: 5em; 
     font-weight: 700; 
     line-height: normal; 
     color: #fff; 
} 

Answer 1

Использование display: inline-block; vertical-align: bottom; для DIV с классом бренда и text-align: center; для .container

HTML:

<div class="container"> 
    <img class="img-responsive brand-img" src="http://placehold.it/100x100" alt="" /> 
    <div class="brand">MG STAV</div> 
    <div class="address-bar">stavební, spol. s.r.o.</div> 
</div> 

CSS:

.container{ 
text-align: center; 
} 
.brand-img { 
    text-align: center; 
} 
.brand { 
    display: inline-block; 
    margin: 0; 
    vertical-align: bottom; 
    padding: 30px 0 10px; 
    text-align: center; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
    font-family:"Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 5em; 
    font-weight: 700; 
    line-height: normal; 
    color: #fff; 
} 

Проверьте это Jsfiddle

Answer 2

Установите элементы внутри контейнера на «встроенный блок».

JSBIN: http://jsbin.com/fozafufaka/1/edit?css,output

HTML

<div class="container"> 
    <img class="img-responsive brand-img" src="http://placehold.it/50x50" alt=""> 
    <div class="brand">MG STAV</div>  
    <div class="address-bar"> stavební, spol. s.r.o.</div> 
</div> 

CSS

.container { 
    text-align:center; 
} 

.brand-img{ 
    display:inline-block 
} 

.brand { 
     display: inline-block; 
     padding: 30px 0 10px; 
     text-align: center; 
     text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
     font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size: 5em; 
     font-weight: 700; 
     line-height: normal; 
     color: #fff; 
}