Question

#logo {
    position: absolute;
    width:100%;
    height:100%; 
    text-align: center;
}
#logo-img img {
    float:left;
    height: 4.3vw;
}
#logo-text {
    float:left;
    font-size:2vw;
}

<div id="logo">
    <div id="logo-img">
        <img src="http://revistasindromes.com/images/100x100.gif" />
    </div>
    <div id="logo-text">Lorem Ispum Dolores</div>
</div>

我尝试添加left:50%;right:50%，但它没有在中间水平对齐。在我的情况下水平对齐div的正确方法是什么？

JSFiddle：http://jsfiddle.net/8s0q9cyq/

Answer 1

我改进了Praveen的答案：https://jsfiddle.net/9mpgdqzf/

不要仅使用带有ID的div来为IMG提供样式。 Img可以拥有ID并直接将所有属性继承到它中，并且您的HTML变得更清晰，更轻;）

<div id="logo">
    <img id="logo-img" src="http://revistasindromes.com/images/100x100.gif" />
    <div id="logo-text">Lorem Ispum Dolores</div>
</div>

#logo {
  position: absolute;
  width:100%;
  height:100%; 
  text-align: center;
}

#logo-img, #logo-text {
  display: inline-block;
  vertical-align: middle;
}

#logo-img {
  height: 4.3vw;
}
#logo-text {
  font-size:2vw;
}

Answer 2

为什么不使用text-align: center？

＆＃13;

#logo {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
#logo-img,
#logo-text {
  display: inline-block;
  vertical-align: middle;
}
#logo-img img {
  display: inline-block;
  height: 4.3vw;
}
#logo-text {
  display: inline-block;
  font-size: 2vw;
}

＆＃13;

<div id="logo">
  <div id="logo-img">
    <img src="http://revistasindromes.com/images/100x100.gif" />
  </div>
  <div id="logo-text">Lorem Ispum Dolores</div>
</div>

＆＃13;

Answer 3

＆＃13;

#logo {
    position: absolute;
    width:100%;
    height:100%; 
    text-align: center;
}
#logo-img {
    display:inline-block;
}
#logo-img img {
    height: 4.3vw;
}
#logo-text {
    display:inline-block;
    font-size:2vw;
}

＆＃13;

<div id="logo">
    <div id="logo-img">
        <img src="http://revistasindromes.com/images/100x100.gif" />
    </div>
       <div id="logo-text">Lorem Ispum Dolores</div>
</div>

＆＃13;

如何将div放在另一个div中的位置：绝对？

3 个答案: