How to move block of buttons to the right css

Question

How can I move my block of buttons to the right?

<div class="bttns__block">
    <div>
        <button class="btn-header" onclick='location.href="certificates.html"' >CERTIFICATES</button>
    </div>
    <div>
        <button class="btn-header" onclick='location.href="certificates.html"' >TG</button>
    </div>
    <div>
        <button class="btn-header" onclick='location.href="https://www.twitch.tv/qternel"'>Twitch</button>
    </div>
</div>

score 0 · Answer 1 · answered Feb 17 '22 at 07:25

Working Demo :

.align-right {
  text-align: right
}

<div class="bttns__block align-right">
    <div>
        <button class="btn-header" onclick='location.href="certificates.html"' >CERTIFICATES</button>
    </div>
    <div>
        <button class="btn-header" onclick='location.href="certificates.html"' >TG</button>
    </div>
    <div>
        <button class="btn-header" onclick='location.href="https://www.twitch.tv/qternel"'>Twitch</button>
    </div>
</div>

score 0 · Answer 2 · answered Feb 17 '22 at 07:27

0

Simply add text-align: right; to bttns__block like this:

.bttns__block {
  text-align: right;
}

answered Feb 17 '22 at 07:27

Amirreza

11
2

score 0 · Answer 3 · answered Feb 17 '22 at 08:03

You can move your block with simply use (text-align: right) , Or use position for everywhere you want, see code below

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #191c26;
  color: white;
}
body {
  position: relative;
}
.bttns__block {
  /* position: absolute;  // if want move everywhere base parent
  top: 0; // if want move everywhere base parent
  left: 50%;  // if want move everywhere base parent */
  text-align: right;
}

<div class="bttns__block">
      <div>
        <button class="btn-header" onclick='location.href="certificates.html"'>
          CERTIFICATES
        </button>
      </div>
      <div>
        <button class="btn-header" onclick='location.href="certificates.html"'>
          TG
        </button>
      </div>
      <div>
        <button
          class="btn-header"
          onclick='location.href="https://www.twitch.tv/qternel"'
        >
          Twitch
        </button>
      </div>
    </div>

How to move block of buttons to the right css

3 Answers3