Изображение на вершине DIV

Question

Поэтому в основном то, что им с целью сделать это:

Однако, я не в состоянии сделать стрелку (как IMG) показать на вершине дел. Также я был бы признателен, если бы кто-то 1 мог советовать о том, как центрировать стрелку вертикально и горизонтально.

Вот что я получил:

section.main{ 
 
    background-image: url(images/main.png); 
 
    overflow: auto; 
 
    padding: 290px 0px; 
 
    max-width: 1920px; 
 
    position: relative; 
 
    div{ 
 
     height: 83px; 
 
     width: 83px; 
 
     background-color: #fff; 
 
     opacity: 0.5; 
 
     line-height: 83px; 
 
     vertical-align: middle; 
 
     text-align: center; 
 
     } 
 
    img.arr{ 
 
     z-index: 100; 
 
    } 
 
    div.btnLeft{ 
 
     float: left; 
 
    } 
 
    div.btnRight{ 
 
     float: right; 
 
    } 
 
    p{ 
 
     font-family: 'Playfair Display', sans-serif; 
 
     font-style: italic; 
 
     color: #fff; 
 
     font-size: 32px; 
 
     position: absolute; 
 
     top: 316px; 
 
     left: 375px; 
 
    }

 <section class="main"> 
 
      <p>Laisve kurti ir veikti!</p> 
 
      <div class="btnLeft"> 
 
       <img class="arr" src="images/al.png"> 
 
      </div> 
 
      <div class="btnRight"> 
 
       <img class="arr" src="images/ar.png"> 
 
      </div> 
 
     </section>

Спасибо!

Answer 1

Вы можете сделать это без каких-либо изображений, используя псевдо

section.main { 
 
    background-image: url(images/main.png); 
 
    overflow: auto; 
 
    padding: 90px 0px; 
 
    max-width: 1920px; 
 
    position: relative; 
 
} 
 
    div { 
 
    position: relative; 
 
    height: 83px; 
 
    width: 83px; 
 
    background-color: lightgray; 
 
    opacity: 0.5; 
 
    } 
 
    div::after { 
 
    content: '>'; 
 
    font-weight: bold; 
 
    font-size: 60px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    } 
 
    div.btnLeft::after { 
 
    content: '<'; 
 
    } 
 
    div.btnLeft { 
 
    float: left; 
 
    } 
 
    div.btnRight { 
 
    float: right; 
 
    } 
 
    p { 
 
    font-family: 'Playfair Display', sans-serif; 
 
    font-style: italic; 
 
    color: #fff; 
 
    font-size: 32px; 
 
    position: absolute; 
 
    top: 316px; 
 
    left: 375px; 
 
    }

<section class="main"> 
 
    <p>Laisve kurti ir veikti!</p> 
 
    <div class="btnLeft"> 
 
    </div> 
 
    <div class="btnRight"> 
 
    </div> 
 
</section>

---

Если вы все еще хотите изображения, добавлять их, как это

div::after { 
    content: url(images/ar.png); 
    } 
    div.btnLeft::after { 
    content: url(images/al.png); 
    }