How to set items on left and right to center align image - SEO

androidXP
September 14, 2019
135 views
4 votes
4 Answers

I have really basic question for most of HTML and CSS guy. 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.

Tags: css html

Answers

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>

Hope this help you.

Please try below 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>

You need something like this?

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

You can split the ul items using jquery and then apply 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>

Please signup or login to give your own answer.

Click here to cancel reply.

How to set items on left and right to center align image – SEO

Answers