Question

我要建立一个英雄区域，需要在其中放置一个图像。问题是，我该怎么做。

图像是我需要实现的。我需要尝试将英雄区域中间的“ Top 50”徽章放置在背景的“横幅”上方。

JSFiddle：https://jsfiddle.net/upenasyk/2/

“分裂英雄”部分的简单HTML和CSS代码如下：

    <div class="container">
    <div class="row">            
        <div class="trsc-top-50-image col-lg-6">
        </div>
        <div class="trsc-top-50-text col-lg-6">
            <div class="hero-content split-hero-content">
                <div class="hero-content-inner">
                    <h3>What is the TrialScout Top 50?</h3>
                    <p>
                        The TrialScout Top 50 was established to recognize the elite clinical research programs driving American healthcare forward. Hospitals are selected based on their exceptional performance in quality, research
                        experience, infrastructure and patient experience.
                    </p>
                    <p>
                        With TrialScout’s comprehensive global data set, hospitals are chosen by their assembled composite score. Composite scores are compiled with data collected from all active United States clinical research institutions and linked to numerous, other publicly available data sets, as well as ongoing, real-time direct patient feedback.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.trsc-top-50-image {
    background-image: url('images/TSTop50HeroImage.png');
    background-size: cover;

}

.trsc-top-50-text {
    background-image: linear-gradient(-135deg, #73c389, #5fc3c1);
}


.hero-content-inner {
    margin: 10%;
}

    .hero-content-inner h3 {
        /*margin: auto;*/
        color: #0A5D66;
        text-align: center;
        font-weight: bold;
        font-size: 1.5em;
    }

    .hero-content-inner p {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        color: black;
    }

Answer 1

似乎您正在使用引导程序。无论如何，您可以将徽标放置在另一个div中，并放在.row中，并使其处于绝对位置，并从let和right位置将其推动50％。然后再次将其推回其自身的宽度和高度，以便将其水平或垂直放置在中央。这是我的意思：

<div class="container">
    <!--previous content-->
    <div class="centerLogo">
        <img src="Your-Logo">
    </div>
</div>

CSS

.centerLogo img{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%)
}

Here is the live preview

如何在英雄区域顶部居中放置图像？

1 个答案: