I am trying to make my two buttons appear on the far right of a piece of text. I want the text and two buttons to all be inline with each other but the text is on the left and the two buttons are on the right. I have seen multiple solutions and I could get it to work with only 1 button but when I have two buttons it does not work.
I run a for loop over 'weaknesses' and print out each weakness. Each weakness will have an update and delete action.
I tried to do margin-left but each weakness is a different length so my buttons would not line up
I also tried using some solutions from this post but could not seem to get the expected outcome: Place a button right aligned
Any help would be appreciated
HTML
<div *ngFor="let weakness of weaknesses | async">
<div class="flex-box">
<p>{{ weakness }}</p>
<a class="btn btn-light btn-sm pull-right" href="#">Update</a>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
Try this:
#btnHolder {
position:fixed;
top:10px;
right:10px;
}
<p>Text is here</p>
<div id="btnHolder">
<button>Update</button>
<button>Delete</button>
</div>
I dont know why it was so hard. It should have been easier to fix this problem.
One solution is auto margin with flex
nav {
display: flex;
align-items: center;
}
nav button:first-of-type {
/* Key here is margin-left needs to be auto */
margin: 0 10px 0 auto
}
<nav>
<span>Text</span>
<button>Button 1</button>
<button>Button 2</button>
</nav>
You should do it like this:
.flex-box {
display: flex;
align-items: center;
justify-content: start;
}
#buttons{
margin-left: 10px;
}
<div class="flex-box">
<p>Text is here</p>
<div id="buttons">
<a>Update</a>
<button>Delete</button>
</div>
</div>
Related
Here is my HTML code. I am trying to add a vertical line that seperates the login and sign up buttons, anybody have an idea how to do this?
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
add a div between them and give it proper height width and color
.line{
background-color:black;
height:20px;
width:3px;
}
.header-buttons{
display:flex;
justify-content:center;
align-items:center;
}
.btn{
margin: 10px
}
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<div class="line"></div>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
Depends of the height you want for the line. But I think the solution would be to put a border (for ex: solid 2px black) on the right border of the left button or vice versa if you put a border for the right button. Or, create a <div> between the two buttons and play with background color or the borders.
I cant get the 4 buttons to align in two rows. I've tried using flexbox yet I can only get them to align in two rows of three buttons at the top and one at the bottom. Ideally the buttons would be in the centre of the page, equally distant from each other.
HTML code
CSS code
Result
You can do it this way using flexbox note that you have to make two containers as a parent to hold your buttons.
.button_tense{
width:300px;
height: 300px;
}
.container{
display: flex;
flex-direction: row;
justify-content: space-around;
}
<div class="container">
<button class="button_tense"><a >present</a></button>
<button class="button_tense"><a >past</a></button>
</div>
<div class="container">
<button class="button_tense"><a >future</a></button>
<button class="button_tense"><a >imperfect</a></button>
</div>
And using grid with this
.button_tense{
width:300px;
height: 300px;
}
.container{
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}
<div class="container">
<button class="button_tense"><a >present</a></button>
<button class="button_tense"><a >past</a></button>
<button class="button_tense"><a >future</a></button>
<button class="button_tense"><a >imperfect</a></button>
</div>
I would recommend for you to see this
Guide To Grid
and this
Guide To Flexbox
And welcome to stackoverflow :)
You have to add divs around each of the 2 buttons you want in the same row. Code is below.
button{
margin:5px;
}
<div>
<button class="button_tense"><a >present</a></button>
<button class="button_tense"><a >past</a></button>
</div>
<div>
<button class="button_tense"><a >future</a></button>
<button class="button_tense"><a >imperfect</a></button>
</div>
Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>
The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1
Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.
I have a row with header text and a button on the right.
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
The code above is what I have currently but I have tried many variations. In all of them, the button is not vertically aligned with the text. (The image below includes the overlay when I hover over the element in the Elements pane of Chrome, in order to show vertical alignment.)
Searching existing questions on stackoverflow, I've found this question posted a number of times; however, I found no knowledgeable answers.
Has anyone figured this out?
This happens because the line-height of the heading and the height of the button differ.
With a line-height: 1.9; for the heading it should work:
.page-header h4 {
line-height: 1.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
You can try using the grid to be mobile friendly and make everything inside vertically aligned.
<div class="page-header vertical-center">
<div class="row">
<div class="col-md-8">
<h1>Text on the left</h1>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
</div>
</div>
Add this CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}
Suppose I have three buttons
<div class='button-wrap>
<a class='button'>First Button</a>
<a class='button'>Second Button</a>
<a class='button'>Third Button</a>
</div>
What is the best way to left align the first, and right align the second two? Preferably without using float.
I have tried wrapping the second two in a seperate div and using text-align:right but the extra div causes the buttons to go out of alignment with one another.
Try this.
.buttons {
display: flex;
justify-content: space-around;
}
.buttons .button:first-child {
flex-grow: 1;
}
<div class="buttons">
<div class="button">
<button>First button</button>
</div>
<div class="button">
<button>Second button</button>
</div>
<div class="button">
<button>Third button</button>
</div>
</div>
You can achieve it with display:flex - no need to change your markup
.button-wrap {
display: flex;
}
.button:nth-child(2) {
/* margin left the second button */
margin-left: auto;
}
<div class="button-wrap">
<a class="button">First Button</a>
<a class="button">Second Button</a>
<a class="button">Third Button</a>
</div>
With float, you have to wrap your links into divs like this :
.left {
float: left;
}
.right {
float: right;
}
<div class='button-wrap'>
<div class="left">
<a class='button'>First Button</a>
</div>
<div class="right">
<a class='button'>Second Button</a>
<a class='button'>Third Button</a>
</div>
</div>
Use flexbox with justify-content: space-between on the wrapper, plus put margin-left: auto on the second button. This will align everything from there on to the right, while everything before that stys left-aligned.
EDIT: I simplyfied the previous code - less is more efficient...
.wrap {
display: flex;
justify-content: space-between;
}
button:nth-child(2) {
margin-left: auto;
}
<div class="wrap">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>