Question

嘿，我已经完成了我的新网站的前面。我所拥有的在线问题是，我希望这些字母更大一些

.horizontal-list-item .photo-count{
   color: #bdbcbc;
   border-color:#bdbcbc!important;
   font-size:40px!important;
   font-family:pirulen
}

我给了他们这个新的字体大小。问题是，我不能让圆圈更大，以便它再次适合，并且字母应该在圆圈的中心希望你可以帮助我

<section class="horizontal-list-item" style="background-image:url(images/bg.png);">
   <div class="color-overlay" ></div>
   <div class="gallery-info">
      <div class="gallery-title"><h2>Apps</h2></div>
      <div class="photo-count">A</div>
      <div class="gallery-description"></div>
   </div>
</section>

这是我创建了一个子目录来上传demo site

的链接

Answer 1

圆形尺寸由.gallery-info .photo-count的高度和宽度创建。因此，您需要做的就是调整它们并使值均匀（包括border-radius因为这是圆形元素中的一个因素）以使它们变大。从那里，您可以根据需要调整padding值（第一个整数用于顶部填充），以便按下文本使其显示为居中。

示例：

.gallery-info .photo-count {
border: 1px solid rgba(255, 255, 255, 0.2);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 110px; /*change this */
font-size: 20px !important;
padding: 40px 0 0; /*change this */
top: 0;
display: block;
height: 110px; /*change this */
line-height: 65px;
margin: 0 auto;
opacity: 1;
position: absolute;
right: 50%;
text-align: center;
width: 110px; /*change this */
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}

更大的边界圈和中心内容

1 个答案: