Reputation: 823
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
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
Reputation: 98
you can do it using javascript
document.querySelectorAll("ul > li")[0].firstChild.classList.remove("line");
Upvotes: -2
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
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
Reputation: 648
Use this CSS
ul {
display: inline-block;
}
.line {
display: block;
margin: 0 auto;
}
Upvotes: 0