Блог

У меня есть раздел с героями, который я создаю, и мне нужно поместить изображение в центр. Вопрос в том, как мне это сделать.

Изображение — это то, чего мне нужно достичь. Значок «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;
    }
  

Кажется, вы используете bootstrap. В любом случае, вы можете поместить свой логотип в другой div и внутри .row и сделать его положение абсолютным и сдвинуть его на 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%)
}
  

Вот предварительный просмотр в реальном времени