如何在左右设置项目以使图像居中对齐

Question

I have really basic question for most of HTML and CSS guy. 对于大多数HTML和CSS家伙，我真的有一个基本的问题。 I am trying to align list to center aligned image but not able to set list left or right to the image. 我正在尝试将列表对齐到居中对齐的图像，但无法在图像的左侧或右侧设置列表。

That what my code look like right now 我的代码现在看起来像

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

But i want my screen to look like this. 但是我希望我的屏幕看起来像这样。 Please guide me to get it done in right way. 请指导我以正确的方式完成它。

Answer 1

Hope this help you. 希望这对您有所帮助。

Please try below css. 请尝试下面的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>

Answer 2

You need something like this? 你需要这样的东西吗？

Result: Codepen 结果： Codepen

 .features-title { margin-bottom: 50px; text-align: center; } .features-col li { position: relative; padding-left: 80px; } .features-col li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 50px; height: 50px; background-position: center; background-size: cover; border-radius: 50%; } .item-1::before { background-image: url("https://picsum.photos/id/70/300/300"); } .item-2::before { background-image: url("https://picsum.photos/id/71/300/300"); } .item-3::before { background-image: url("https://picsum.photos/id/72/300/300"); } .item-4::before { background-image: url("https://picsum.photos/id/73/300/300"); } .item-5::before { background-image: url("https://picsum.photos/id/74/300/300"); } .item-6::before { background-image: url("https://picsum.photos/id/75/300/300"); } .features-col { flex-grow: 1; list-style: none; } .features-col--center img { display: block; width: 100%; height: 100%; object-fit: cover; } .features-inner { display: flex; width: 100%; max-width: 800px; margin: 0 auto; } .features-col--center { flex-basis: 25%; flex-grow: 0; } .features-col--left, .features-col--right { display: flex; flex-direction: column; justify-content: space-around; align-items: center; }

 <section class="features"> <h2 class="features-title">Lorem ipsum dolor sit amet consectetur.</h2> <div class="features-inner"> <ul class="features-col features-col--left"> <li class="item-1">Lorem ipsum dolor sit.</li> <li class="item-2">Lorem ipsum dolor sit.</li> <li class="item-3">Lorem ipsum dolor sit.</li> </ul> <div class="features-col features-col--center"> <img src="https://picsum.photos/400/700"> </div> <ul class="features-col features-col--right"> <li class="item-4">Lorem ipsum dolor sit.</li> <li class="item-5">Lorem ipsum dolor sit.</li> <li class="item-6">Lorem ipsum dolor sit.</li> </ul> </div> </section>

Answer 3

try this code and you will get the same layout as you want. 尝试此代码，您将获得所需的布局。

 *{box-sizing: border-box;} .left_box, .center_box, .right_box{ float: left; width: 33.33%; padding: 30px; } .center_box{ text-align: center; }

 <body> <div> <div class="left_box"> <ul> <li> Web Development</li> <li> Application Development</li> <li> Website Design</li> <li> UI/UX Design</li> <li> SEO Service</li> </ul> </div> <div class="center_box"> <img src="https://i.ebayimg.com/images/g/p1UAAOSw1ZBbkPDW/s-l300.jpg" alt="image"> </div> <div class="right_box"> <ul> <li> Web Development</li> <li> Application Development</li> <li> Website Design</li> <li> UI/UX Design</li> <li> SEO Service</li> </ul> </div> </div> </body>

Answer 4

You can split the ul items using jquery and then apply css. 您可以使用jquery拆分ul项目，然后应用CSS。

        <div>
        <ul id="menu" style="visibility:hidden;">
          <li> Web Development</li>
          <li> Application Development</li>
          <li> Website Design</li>
          <li> UI/UX Design</li>
          <li> SEO Service</li>
        </ul>    
    </div>

    <div class="row">
        <div id='leftCol' class="col-md-4"><ul></ul></div>
        <div id='leftCol' class="col-md-4"><img src="images/Mobile-Screen.png"  alt="" width="332" height="506"  style="display:block; margin-left: auto; margin-right: auto;" align="center"></div>
        <div id='rightCol' class="col-md-4"><ul></ul></div>

    </div>


<script>
    $(document).ready(function() {            
        var lis = $('#menu li').length;
        var half = lis/2;
        half = Math.ceil(half);

        for(var i=0; i<half; i++){
            var liText = $('#menu li').eq(i).html();
            $("#leftCol ul").append("<li>"+liText+"</li>");                
        }

        for(var i=half; i<lis; i++){
            var liText = $('#menu li').eq(i).html();
            $("#rightCol ul").append("<li>"+liText+"</li>");                    
        }
    });

</script>

如何在左右设置项目以使图像居中对齐

问题描述

4 个解决方案

解决方案1
1 2019-09-14 13:23:04

解决方案2
1 已采纳 2019-09-14 13:28:22

解决方案3
0 2019-09-14 13:22:07

解决方案4
0 2019-09-14 13:54:59

如何在左右设置项目以使图像居中对齐

问题描述

4 个解决方案

解决方案1 1 2019-09-14 13:23:04

解决方案2 1 已采纳 2019-09-14 13:28:22

解决方案3 0 2019-09-14 13:22:07

解决方案4 0 2019-09-14 13:54:59

解决方案1
1 2019-09-14 13:23:04

解决方案2
1 已采纳 2019-09-14 13:28:22

解决方案3
0 2019-09-14 13:22:07

解决方案4
0 2019-09-14 13:54:59