CODEWITHSUNDEEP
javascripthtmlcssstyling
RS17
RS17

Reputation: 823

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

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>

Upvotes: 4

Views: 1248

Answers (5)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

Omar
Omar

Reputation: 98

you can do it using javascript 

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

Upvotes: -2

chintuyadavsara
chintuyadavsara

Reputation: 1569

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>

Upvotes: 1

LS_
LS_

Reputation: 7149

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>

Upvotes: 1

Dhaval Panchal
Dhaval Panchal

Reputation: 648

Use this CSS

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

Upvotes: 0

Related Questions