CODEWITHSUNDEEP
htmlcssalignment
Gabe Dunn
Gabe Dunn

Reputation: 456

Align Buttons Right

I am making a website and I'm having a small amount of problems with aligning some buttons to the right side of the page.

I've tried using text-align: right and float: left.

Can anyone try to see what I'm doing wrong?

It's currently live at http://biolinks.redxte.ch/

Anything is appreciated.

Upvotes: 0

Views: 28427

Answers (5)

Maizied Hasan Majumder
Maizied Hasan Majumder

Reputation: 1053

You can use the basic One. Which is:

    <button class="btn" style="float: right;">See More..</button>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

If you wrap the stuff you want on the left in an element, you can use flexbox with justify-content: space-between to push the elements on the far edges of the row.

You can also use flexbox on each of those elements with align-items: center to center everything vertically.

I wrapped the content on the left in a div with class .icon, and then all you need to apply is this CSS

.social, .icon, .add-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Here's a demo.

/* included this from your site so the image won't be huge */
.social-img {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
}

/* this is the part you need */
.social, .icon, .add-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<base href="http://biolinks.redxte.ch/">

<div class="row social" id="instagram">
  <div class="icon"> <!-- added this div -->
    <img src="/i/instagram.png" class="social-img">
    <span class="social-text">Instagram</span>
  </div>
  <span class="add-me">
    <a href="https://instagram.com/redxtechx" target="_blank" class="btn btn-primary" role="button">View Profile</a>
  </span>
</div>

Upvotes: 0

sumit
sumit

Reputation: 19

You can use

.add-me{
    margin-left : 80%;
}

I am a beginner but I think this will solve your problem.

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6338

Just add .col-sm-12 div after the row and it work perfectly

<div class="row social" id="snapchat">
  <div class="col-sm-12">
            <img src="/i/snapchat.svg" class="social-img">
            <span class="social-text">Snapchat</span>
            <span class="add-me">
                <a href="#" class="btn btn-secondary" role="button">Add Me</a>
            </span>
        </div>
</div>

Upvotes: 0

kvn
kvn

Reputation: 2300

Use this

.button-parent {
    text-align: right;
}

button {
    display: inline-block;
}

or if you want to make it position absolutely, you can use this

.add-me {
    position: absolute;
    right: 20px;
}

Upvotes: 4

Related Questions