时间戳

首页 > 解决方案 > 如何将左右项目设置为居中对齐图像

html - 如何将左右项目设置为居中对齐图像

问题描述

对于大多数 HTML 和 CSS 人来说，我有一个非常基本的问题。我正在尝试将列表与居中对齐的图像对齐，但无法将列表设置在图像的左侧或右侧。

这就是我的代码现在的样子

 <div>

            <ul >
              <li> Web Development</li>
              <li> Application Development</li>
              <li> Website Design</li>
              <li> UI/UX Design</li>
              <li> SEO Service</li>
            </ul>    
  <img src="images/Mobile-Screen.png"  alt="" width="332" height="506" style="text-align:center; display:block; margin:auto; float:none" align="center">              

                 </div>

但我希望我的屏幕看起来像这样。请指导我以正确的方式完成它。

在此处输入图像描述

标签： htmlcss

解决方案

希望这对您有所帮助。

请尝试下面的CSS。

.mobile_container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: distribute;justify-content: space-around;
}
<div class="mobile_container">

    <ul >
      <li> Web Development</li>
      <li> Application Development</li>
      <li> Website Design</li>
      <li> UI/UX Design</li>
      <li> SEO Service</li>
    </ul>    
<img src="https://i.ebayimg.com/images/g/p1UAAOSw1ZBbkPDW/s-l300.jpg"  alt="image here" width="232" height="406" style="text-align:center; display:block;  float:none" align="center">              
<ul >
    <li> Web Development</li>
    <li> Application Development</li>
    <li> Website Design</li>
    <li> UI/UX Design</li>
    <li> SEO Service</li>
  </ul>  
         </div>

推荐阅读