定位图片

Question

我在定位图片时遇到问题。我想把它放在带有.brand类的div的左侧。以下是网页中使用的代码：

<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

将容器内的元素设置为“inline-block”。

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