[英]How to set items on left and right to center align image
对于大多数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>
但是我希望我的屏幕看起来像这样。 请指导我以正确的方式完成它。
希望这对您有所帮助。
请尝试下面的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>
你需要这样的东西吗?
结果: 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>
尝试此代码,您将获得所需的布局。
*{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>
您可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.