Question

我正在尝试将两个图像水平放置并且位于页面中央。我似乎无法让这个工作，这是我的第四次尝试。的 HTML：

<div class="flex_img">
    <div class="left">
        <img src="images/left_image.jpg" width="460" height="300" /> 
    </div>
    <div class="right">
        <img src="images/right_image.jpg" width="460" height="300" />
       </div>
     </div>

的CSS：

.flex_img{align-items: center;}

Answer 1

您可以尝试此流程代码。这是优化的解决方案。

.flex_img{display: flex; justify-content: center;}


<div class="flex_img">
<div class="left"> <img src="images/left_image.jpg" width="460" height=
  "300" /> </div>
<div class="right"> <img src="images/right_image.jpg" width="460"
  height="300" /> </div>
</div>

Answer 2

嗨，现在你可以试试这个css

定义display flex，justify-content center和align-items center，如下所示

<强>演示

.flex_img{display: flex;
justify-content: center; /* align horizontal */
align-items: center; height:400px;border:solid 1px red;}

<div class="flex_img">
    <div class="left">
        <img src="images/left_image.jpg" width="160" height="200" /> 
    </div>
    <div class="right">
        <img src="images/right_image.jpg" width="160" height="200" />
       </div>
     </div>

支持跨浏览器兼容性

 display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;

Answer 3

在使用flex属性之前，您必须知道它的局限性。

复制此代码并在浏览器上运行（仅限最新版本），这将完全按照您的需要运行。

＆＃13;

<div id='tree'>
                <ul>
                    <li>
                        <label title="XYZ">TEST1</label>
                        <ul>
                            <li>
                                <label title="ABC">TEST2</label>
                            </li>
                        </ul>
                    </li>
                </ul>
    </div>

＆＃13;

.containner{display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* for center of your page */
height:100%; /* give it's height*/
}
img {                           /* optional  */
   background-color:orange;
}

＆＃13;

将两个图像水平对齐在一个div

3 个答案: