Question

我这里有三张图片：

我正在努力完成：一个小图像应该在左边，另一个小图像应该在右边。较大的应该在中心。所有这些图像都应垂直对齐。

我尝试使用text-align，但它不起作用：

HTML：

<div id="menu_header_new">
    <img id="menu_info" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
    <img id="menu_logo" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
    <img id="menu_settings" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>

CSS：

body {
    padding: 0;
    margin: 0;
}
#menu_header_new {
    margin-top: 2.5%;
    min-height:20%;
    width:100%;
    overflow: hidden;
    position: relative;
    border: 1px solid green;

}
#menu_logo {
    position: relative;
    width: 20%;
    height: 10%;
    text-align: center;
}
#menu_info, #menu_settings {
    position: relative;
    width: 10%;
    height: 10%;
}

#menu_info{
    text-align: left;
}

#menu_settings{
    text-align: right;
}

Answer 1

使用text-align，你必须添加一个带有额外元素或伪元素的行来触发text-align：justify;单行。

body {
    padding: 0;
    margin: 0;
}
#menu_header_new {
    margin-top: 2.5%;
    min-height:20%;
    width:100%;
    overflow: hidden;
    position: relative;
    border: 1px solid green;
  text-align:justify;
  font-size:0.01px;
}
#menu_header_new:after {
  content:'';
  display:inline-block;
  width:100%;
  vertical-align:top;
}
img {
  vertical-align:middle;
}
#menu_logo {
    position: relative;
    width: 20%;
    height: 10%;
    text-align: center;
}
#menu_info, #menu_settings {
    position: relative;
    width: 10%;
    height: 10%;
}

或者您可以display:flex;使用display和text-align查看不同的测试：http://codepen.io/gc-nomade/pen/nrbDl

流体 - 垂直对齐所有元素，两个元素左右定位，一个位于中心

1 个答案: