How to draw a vertical line above the image from center?

Question

I wanted vertical lines to connect images ( from the middle) and i don't want to add line above first image.

I have added my http://jsfiddle.net/cd465nj3/ link here

  Image 1
     |
     |
  Image 2
     |
     |
  Image 3

How can i modify above code to get vertical lines from middle? Any help would be appreciated! Thanks!!

.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
     border-left: 6px solid green;
     height: 100px;
}

<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>

look at http://jsfiddle.net/cd465nj3/15/ just need to remove class from first `li` — manikant gautam, Sep 19 '18 at 07:12
`.line {transform: translateX(47px)}` `li:first-of-type > .line {display: none}` — VXp, Sep 19 '18 at 10:17

score 1 · Answer 1 · answered Sep 19 '18 at 07:15

You just need to add this to your css:

/* center line with image */
ul {
    display: inline-block;
}
.line {
    display: block;
    margin: 0 auto;
}
/* Hide first line */
ul li:first-child .line {
  display: none;
}

Example:

/* center line with image */
ul {
  display: inline-block;
}
.line {
  display: block;
  margin: 0 auto;
}

/* Hide first line */
ul li:first-child .line {
  display: none;
}
.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
     border-left: 6px solid green;
     height: 100px;
}

<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>

score 1 · Answer 2 · answered Sep 19 '18 at 07:18

in .line class make the display:inline-block and margin:0 auto;

ul {
    display: inline-block;
}

.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
  border-left: 6px solid green;
  height: 100px;
  display: inline-block;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>
</body>
</html>

Mamun · Accepted Answer · 2018-09-19T09:35:29.747

You can add the following style:

ul {
  display: inline-block;
}
.line {
  display: block;
  margin: 0 auto;
}

ul li:first-child > span.line { display: none; }

Working Code Example:

.box {
    width:662px;
    margin:0 auto;
    
}

.box li {
   display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction:column;
  
}

img{
  height: 100px;
  width:100px;
  border-radius: 50%;
}

.line {
     border-left: 6px solid green;
     height: 100px;
}
ul {
    display: inline-block;
}
.line {
    display: block;
    margin: 0 auto;
}

ul li:first-child > span.line { display: none; }

<div class="box">
    <ul>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li ><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
        <li><span class="line"></span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li>
    </ul>
</div>

score 0 · Answer 4 · answered Sep 19 '18 at 07:07

0

Use this CSS

ul {
    display: inline-block;
}
.line {
    display: block;
    margin: 0 auto;
}

answered Sep 19 '18 at 07:07

Dhaval Panchal

648
6
26

score -2 · Answer 5 · answered Sep 19 '18 at 07:21

-2

you can do it using javascript

document.querySelectorAll("ul > li")[0].firstChild.classList.remove("line");

answered Sep 19 '18 at 07:21

Omar

98
2
12

How to draw a vertical line above the image from center?

5 Answers5