Question 183991 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Buttons align issue

I was doing this web page (i am a begginer in CSS), and i was wondering if anyone could help me to put the buttons aside of the blue box thingy

.btn-prev, .btn-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    display: inline-block;
    border: none;
    line-height: 40px;
    margin: 0 auto;
    top: 30%;
    z-index: 2;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    font-family: monospace;
    cursor: pointer;
  }
  
  .btn-prev:hover, .btn-next:hover {
    background: rgb(238, 236, 236);
  }
  
  .btn-prev {
    left: 10% auto;
    right: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
    
  }
  
  .btn-next {
    right: 10% auto;
    left: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
  }

as y’all can see it’s a bit of a mess because i was messing around and i don’t wanna f- it up (as i said i am a begginer) and could use some help

here is what it looks like
enter image description here
and i want the buttons aside of the blue box and centered in the middle, not flexed because it would f- up the position as i want it to move aside of the window, help 😥
enter image description here
here is how i would (theoretically) want it to look like, without further to say, thank you 😁

EDIT:
I will add the html for y’all to see

<section>
    <div id="btn-prev" class="btn-prev"><</div>
    <div id="btn-next" class="btn-next">></div>
    <div class="center_part">
      <div class="zoom">
   </div><br><br>
    <button class="button btnleer">Leer</button>
  </div>
  </section>

I didn’t put all the html, just the section where the buttons are 🫠

Tags:

4

Answers


  1. 0

    Giving the main div(the div with blue blackground-color) position relative and both the button position absolute can set the button by changing the left right position accordingly as you want.

    .btn-prev, .btn-next {
        position:absolute;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.7);
        display: inline-block;
        border: none;
        line-height: 40px;
        margin: 0 auto;
        top: 30%;
        z-index: 2;
        font-size: 30px;
        font-weight: bold;
        border-radius: 50%;
        font-family: monospace;
        cursor: pointer;
      }
      
      .btn-prev:hover, .btn-next:hover {
        background: rgb(238, 236, 236);
      }
      
      .btn-prev {
        left: 10% auto;
        right: 100%;
        margin: 0 auto;
        text-align: center;
        border: none;
        
      }
      
      .btn-next {
        right: 10% auto;
        left: 100%;
        margin: 0 auto;
        text-align: center;
        border: none;
      }
    Login or Signup to reply.
  2. 0 
    .center_part {
  position: relative;
  text-align: center;
}

.btn-prev,
.btn-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  display: inline-block;
  border: none;
  line-height: 40px;
  z-index: 2;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.btn-prev {
  left: 10px;
}

.btn-next {
  right: 10px;
}

.btn-prev:hover,
.btn-next:hover {
  background: rgb(238, 236, 236);
}

    I’m a noob in HTML, but I guess this may help

    Login or Signup to reply.
  3. 0

    Just use flex to align your content into a row. You’ll have to move a button in the HTML around. But you’ll get the effect you want. Much better than using position absolute which would need more wrapping elements to contain.

    section {
  display: flex;
  flex-direction: row;
}

    <section>
  <div id="btn-prev" class="btn-prev">&#60;</div>
  <div class="center_part">
    <div class="zoom"></div>
    <br><br>
    <button class="button btnleer">Leer</button>
  </div>
  <div id="btn-next" class="btn-next">&#62;</div>
</section>
    Login or Signup to reply.
  4. 0

    As I know if you want to let html elements order by horizontal you can use flex container with flex item. Try to search FlexBox on Google.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search