1. 首页
  2. 问答
  3. Css时间轴文本对齐

Css时间轴文本对齐

2017-07-02 60 views
0

伙计，Css时间轴文本对齐

我想用css构建一个时间轴，我对这些红色圆圈有问题。我想添加一些信息，这些信息应该在红圈（最多一个或两个字）内垂直和水平居中文本，我可以请求您的帮助吗？

.timeline-image { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    width: 390px; 
 
    height: 390px; 
 
    background: rgba(203, 190, 181, 0.3); 
 
    border-radius: 50%; 
 
} 
 

 
.timeline-image img { 
 
    position: relative; 
 
    z-index: 99999; 
 
    top: -30px; 
 
} 
 

 
.timeline ul li { 
 
    list-style: none; 
 
    position: relative; 
 
    width: 1px; 
 
    margin: 0 auto; 
 
    padding-top: 10px; 
 
    background: #b2b2b2; 
 
} 
 

 
.timeline ul li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 
    transform: translateX(-50%); 
 
    width: 87px; 
 
    height: 87px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    top: 76%; 
 
} 
 

 
.timeline ul li div { 
 
    position: relative; 
 
    bottom: 0; 
 
    left: 100px; 
 
    top: 120px; 
 
    width: 400px; 
 
    padding: 15px; 
 
    background: transparent; 
 
} 
 

 
.timeline ul li:nth-child(even) div { 
 
    left: -439px; 
 
} 
 

 
.timeline ul li:nth-child(even) div:before { 
 
    right: -15px; 
 
    border-width: 8px 0px 8px 16px; 
 
    border-color: transparent transparent transparent #F45B69; 
 
} 
 

 
.timeline h3 { 
 
    font-family: "Open-Sans", sans-serif; 
 
    font-size: 34px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.timeline p { 
 
    font-family: "Open-Sans", sans-serif; 
 
    font-size: 16px; 
 
    color: #555; 
 
    margin-bottom: 32px; 
 
} 
 

 
.timeline ul li a { 
 
    font-family: "Open-Sans-Bold", sans-serif; 
 
    font-size: 16px; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.timeline ul li a:hover { 
 
    opacity: 0.7; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<section class="timeline"> 
 
    <div class="container"> 
 

 
    </div> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline1.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> 
 
     <a href="#" class="read-more">lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline2.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
 
     <a href="#" class="read-more">Lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline3.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
 
     <a href="#" class="read-more">lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline4.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
 
     <a href="#" class="read-more">lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    </ul> 
 
</section> 
 
<!-- timeline -->

来源

2017-07-02 Peter Solvien

+0

请提供更多信息，你的代码做什么。 – Peter

+0

现在什么都没有，我只是试图在这些红色圆圈内添加一些居中的文字，但我不知道如何完成它。 –

回答

0

使用pseudo selector :before然后添加文本使用G含量或者你甚至可以添加一个新的div然后对齐，使用位置absolute已风格的伪选择器的中央:after

.timeline ul li:before { 
    content: "Hey"; 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    top: 85%; 
    left: -18px; 
    z-index: 9; 
    color: white; 
    font-size: 24px; 
} 


.timeline-image { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    width: 390px; 
 
    height: 390px; 
 
    background: rgba(203, 190, 181, 0.3); 
 
    border-radius: 50%; 
 
    background: blue; 
 
} 
 

 
.timeline-image img { 
 
    position: relative; 
 
    z-index: 99999; 
 
    top: -30px; 
 
} 
 

 
.timeline ul li { 
 
    list-style: none; 
 
    position: relative; 
 
    width: 1px; 
 
    margin: 0 auto; 
 
    padding-top: 10px; 
 
    background: #b2b2b2; 
 
    z-index: -1; 
 
} 
 

 
.timeline ul li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 
    transform: translateX(-50%); 
 
    width: 87px; 
 
    height: 87px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    z-index: 8; 
 
} 
 

 
.timeline ul li:before { 
 
    content: "Hey"; 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 30px; 
 
    top: 85%; 
 
    left: -18px; 
 
    z-index: 9; 
 
    color: white; 
 
    font-size: 24px; 
 
} 
 

 
.timeline ul li div { 
 
    position: relative; 
 
    bottom: 0; 
 
    left: 100px; 
 
    top: 120px; 
 
    width: 400px; 
 
    padding: 15px; 
 
} 
 

 
.timeline ul li:nth-child(even) div { 
 
    left: -439px; 
 
} 
 

 
.timeline ul li:nth-child(even) div:before { 
 
    right: -15px; 
 
    border-width: 8px 0px 8px 16px; 
 
    border-color: transparent transparent transparent #F45B69; 
 
} 
 

 
.timeline h3 { 
 
    font-family: "Open-Sans", sans-serif; 
 
    font-size: 34px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.timeline p { 
 
    font-family: "Open-Sans", sans-serif; 
 
    font-size: 16px; 
 
    color: #555; 
 
    margin-bottom: 32px; 
 
} 
 

 
.timeline ul li a { 
 
    font-family: "Open-Sans-Bold", sans-serif; 
 
    font-size: 16px; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 

 
.timeline ul li a:hover { 
 
    opacity: 0.7; 
 
}
<section class="timeline"> 
 
    <div class="container"> 
 

 
    </div> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline1.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> 
 
     <a href="#" class="read-more">lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline2.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
 
     <a href="#" class="read-more">Lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline3.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
 
     <a href="#" class="read-more">lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
     <img src="images/timeline4.jpg" width="324" height="125" title="someText" alt="someText"> 
 
     <h3>Lorem</h3> 
 
     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
 
     <a href="#" class="read-more">lorem 
 
\t \t \t \t \t \t \t \t <img src="images/example-arrow.png" title="someText" alt="someText"> 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
    </li> 
 
    </ul> 
 
</section> 
 
<!-- timeline -->

来源

2017-07-02 15:05:49 frnt

+0

谢谢！如果你有时间，你可以用几句话来解释我如何完成同样的事情，但与分裂？ –

+0

欢迎@PeterSolvien :-)，你的意思是使用div，如果是这样，然后添加一个新的div，然后将其设置为绝对位置，但是在设计时必须使用大部分负值。所以这个伪工作正常。 – frnt

+0

是的，我想要使用div，因为每个圆圈的内容必须不同，而使用伪类我无法做到这一点。感谢您的建议。 –

0

试试这个

CSS

.timeline ul li:after{ 
content:"hello"; 
text-align:center; 
line-height:87px; 
}

化妆用行高和文字对齐 希望这有助于..的

来源

2017-07-02 14:49:30

+0

我使用了相同的列表：在伪类之后创建红色圆圈，所以我需要另一个用于文本的替代方法，因此我的每个红色圆圈都由此li生成：之后我无法使用它。此外，我不能在伪类之前使用，因为这些圈内的文本必须是不同的不一样。 –

相关问题

 相关问题