Question

我有一个长文本的标题，我似乎无法拿出适当的CSS来将所有文本都放在正确的中间。我需要两行或更多行，药丸必须位于正确区域的中心。谁能告诉我这是怎么做的？任何帮助表示赞赏。

.c-cta-box-link{
  text-decoration-color: #ffffff;
}

a{
  color: #000;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.c-cta-box-header {
    padding: 1px 15px 8px;
    background-color: #bbce00;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
.c-cta-box-headline {
    margin-bottom: 0;
    padding-right: 20px;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    }
    
    .c-cta-box-content {
    height: calc(100% - 40px);
    padding: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    }
    
    .c-cta-box-link:after {
    content: "";
    position: absolute;
    top: 10%;
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}

<a title="Download som PDF her" href="/-/media/wakeup/pdf/organisationsdiagram-dk-01-07-2017.pdf?la=da&amp;hash=69E3519ABB423F7EA21E655A18F2C7BCAA84A4E5" target="Aktiv browser" class="c-cta-box-link">
<div class="c-cta-box-header">
  <h2 class="c-cta-box-headline">Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF  </h2>
</div> 
<div class="c-cta-box-content"></div>
</a>

Answer 1

这应该有助于集中箭头，并使用以下内容更新以下元素：

   - (UIImage *)imageByCroppingImage:(UIImage *)image toSize:(CGSize)size
{
    // not equivalent to image.size (which depends on the imageOrientation)!
    double refWidth = CGImageGetWidth(image.CGImage);
    double refHeight = CGImageGetHeight(image.CGImage);

    double x = (refWidth - size.width) / 2.0;
    double y = (refHeight - size.height) / 2.0;

    CGRect cropRect = CGRectMake(x, y, size.height, size.width);
    CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], cropRect);

    UIImage *cropped = [UIImage imageWithCGImage:imageRef scale:0.0 orientation:self.imageOrientation];
    CGImageRelease(imageRef);

    return cropped;
}

注意：由于在a { position: relative; display: block; color: #000; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } .c-cta-box-link:after { content: ""; position: absolute; top: 50%; margin-top: -3px; right: 7%; width: 0; height: 0; border-top: 6px solid transparent; border-right: none; border-bottom: 6px solid transparent; border-left: 6px solid #fff; margin: 0; white-space: nowrap; }标记的相对空间中计算出空的c-cta-box-content div，因此箭头不会直接居中。

Answer 2

我通过添加以下内容轻松解决了该问题：calc（50％-20px）; Calc是一项功能，可让您直接在CSS中执行数学计算。它的很酷的功能是您可以混合和匹配单位，因此您可以要求一个百分比单位，但是要从百分比大小中减去一个像素大小。

.c-cta-box-link:after {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}

我如何将药丸箭头定位在长文本的右中心？

2 个答案: