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.
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;
}
You can use
.add-me{
margin-left : 80%;
}
I am a beginner but I think this will solve your problem.
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">
Add Me
</span>
</div>
</div>
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">
View Profile
</span>
</div>
You can use the basic One. Which is:
<button class="btn" style="float: right;">See More..</button>
Related
So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.
Here is all the code I have written related to the notification:
The HTML:
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
The CSS:
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification__container {
display: flex;
align-items: center;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
}
Here is the Output
Here is the Expected Output
Here are the solutions I have tried:
display: block;
margin-left: auto;
float: right;
text-align: right;
display: flex;
justify-content: right;
Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page
Thank You.
It's possible to massively simplify your markup as follows:
Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.
Some good resources here:
Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)
Any questions just drop me a comment and I'll try help out.
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}
.image {
width: 50px;
border-radius: 5px;
}
.align-right {
margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}
.round {
border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
<div class="notification">
<img src="https://picsum.photos/id/64/50/50" class="image round" />
<div class="notification-formatting">
<strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>
Base on your code you can set to
.align-right {justify-content: space-between; width: 100%; display: flex;}
and set 100% width to all parents divs you can see code bellow
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
width: 100%;
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification-formatting {
width: 100%;
}
.notification__container {
display: flex;
align-items: center;
width: 100%;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time></div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
I'm trying to put 2 components side by side but I would like one of components to be on the right of the other component without the other component being reorientated.
Example:
Here, after adding a button component to the side of the "Function" heading, the "Function" heading gets pushed to the left. However, I would like the "Function" heading to be in the middle and the "TEST" at the right. As much as possible, I'd like to avoid absolute positions.
<h4 align="right" style={{display: "inline-block"}}>Function</h4><Button sx={{float: "right"}}>Test</Button>```
This is my current code but I'm unsure what I can do. Thanks in advance!
Your question is not very clear to me, but I believe you should read about flex layout CSS property.
All possible solutions of your question
.flex0 {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex1 {
display: flex;
align-items: center;
justify-content: space-around;
}
.flex2 {
display: flex;
align-items: center;
justify-content: space-evenly;
}
<div class="flex0">
<h4 align="right" style={{display: "inline-block"}}>Function</h4><Button sx={{float: "right"}}>Test</Button>
</div>
<div class="flex1">
<h4 align="right" style={{display: "inline-block"}}>Function</h4><Button sx={{float: "right"}}>Test</Button>
</div>
<div class="flex2">
<h4>Function</h4><Button>Test</Button>
</div>
There are many ways to accomplish this. But first you must understand why this misalignment happens when you use float.
Without float on button you can see it perfectly aligns to the heading with inline-block; but as soon as you introduce the float, it detaches the button as pushes it on the right side of the screen on the top corner of the block line. (image attached)
This happened because the heading tags, by default, have margins.
So to align them properly,
1st thing you can do is to provide the float button a similar margin as that of the heading.
<div>
<h4 style='display: inline-block;'>Function</h4>
<Button style='float: right; width: 50px; height: 30px; margin: 1.33em'>Test</Button>
</div>
2nd:
Wrap them in a div and use a grid with align-items: center
<div style='display: grid; grid-template-columns: 1fr 1fr; align-items: center;'>
<h4 style='display: inline-block;'>Function</h4>
<Button style='margin-left: 85%; width: 50px; height: 30px;'>Test</Button>
</div>
3rd
going the usual way, introduce left margin to the button in % (or vice-versa) i.e without float
<div>
<h4 style='display: inline-block;'>Function</h4>
<Button style='margin-left: 75%;'>Test</Button>
</div>
<div>
<h4 style='display: inline-block; margin-right: 85%;'>Function</h4>
<Button style=''>Test</Button>
</div>
Other options:
Utilise flex containers as suggested by other answers.
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
I am working on a mobile site and I have a code like below.
<div class="profile-div-wrapper">
<div class="profile-div">
<div class="header">
<img src="assets/images/image.png" alt=""><h3 id="txtDisplayUserName">Surajjjjjjjjjjj Shukla</h3>
Edit Profile
</div>
</div>
</div>
When the heading is bigger, anchor Edit Profile shifts below.
Here's the fiddle for the same. What can be done to solve this?
Note: Please make sure you make the fiddle of mobile device size to see the problem..
CSS
Try adding this to your existing code:
.profile-div .header {
display: flex;
align-items: center;
}
.profile-div .header a.bttn3 {
margin-left: auto; //instead of float: right;
display: flex; //instead of display: block;
//to vertically & horizontaly align the text inside the button
align-items: center;
justify-content: center;
}
https://jsfiddle.net/o3Lfprw6/2/
This is definitely such a basic question but I'm trying to do this in Ionic. I've been trying
margin: 0 auto;
text-align: center;
position: relative;
so many things but it's not working, help?
UPDATE: So I've tried one of the solutions and this is my CSS, but it still doesn't work, its center, but all the way at the top
.square{
width: 25vw;
height: 8vw;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
HTML:
<div class="container"
<div class="button-wrapper">
<button class="button button-outline square button-calm">
Male
</button>
<button class="button button-outline square button-royal">
Female
</button>
</div>
</div>
You can use flexbox to achieve this. Firstly wrap the buttons within a container:
<div class="container">
<div class="button-wrapper">
<button class="male">Male</button>
<button class="female">Female</button>
</div>
</div>
Then, in the CSS, apply vertical and horizontal centring to the children of the container:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Codepen example
I have no experience with iconic framework. But I think following suggestions might work, give it a try:
1) You can try <center> tag
2) or you can try left:50%; (which is setting the left margin)
I've decided to do
.square{
width: 25vw;
height: 10vw;
}
.container {
padding-top: 35vh;
display: flex;
justify-content: center;
align-items: center;
height: 100%
}
not sure how good of a convention this is, but it seemed to center it decently on different devices
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/