定位图片

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，.container使用text-align: center;

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

检查这个小提琴手

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