Home > Software engineering >  Make the button on right and center on the card css
Make the button on right and center on the card css

Time:02-01

Hello I have a card in html which contains a button I wanted to display the button on the right and also center it in the card.I want to display the div with the class mydivbutton on the left and centered in the card

<div >
    <div>
        <div >
            <a  href=""
                target="_blank">
                developpeur
            </a>
        </div>
        <div >
            <span >
               soft
            </span>
        </div>
    </div>

    <div >
        <button>My button </button>
    </div>
</div>

CodePudding user response:

Your question is not very clear about what you already have and what you actually want.

You should try using flexbox. Be sure to specify a width and height to the class mycard, since this will be your flex. Then you can add justify-content:space-between; to clearify that you want the button separate from the rest of the text. Then add align-items: center; to specify that you want them to be vertically centered.

I did it like this as a reference

.mycard{
      width:300px;
      height: 100px;
      background: orange;
      
      display:flex;
      justify-content: space-between;
      align-items: center;
    }

CodePudding user response:

The better implementation is using flexbox properties. Search for this and mainly for properties justify-content (wich align horizontally your elements) and align-items (wich align vertically your elements).

CodePudding user response:

you need to learn about flexbox with CSS! https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And yours question was not clear :( I can't help you with accuracy. But you can send me a message at any time and i try to help u (sorry for my bad english, i'm brazilian)

  •  Tags:  
  • Related