I'm trying to create previous / next buttons at the bottom of a set of images, to navigate to a previous and next project. I'd like the previous button with icon to align to the left and the next button (and icon) to align to the right.
I figured flex would be the correct way to do this using flex start for the previous button and flex-end for the next button but I can't get it to work and have tried a few tutorials, any pointers would be very helpful.
Also doing it in SASS to make it 'easier'... :)
Thank you
.item-pagination-prevnext {
display: flex;
background-color: grey;
padding: 10vw 0;
.item-pagination-link {
display: flex;
justify-content: flex-start;
align-items: center;
a {
cursor: pointer;
}
.item-pagination-icon {
position: relative;
padding: 0 25px;
}
.item-pagination-link-next {
display: flex;
justify-content: flex-end;
color: red;
align-items: center;
}
}
<div class="item-pagination-prevnext">
<!-- prev -->
<a class="item-pagination-link item-pagination-link-prev" href="#">
<div class="item-pagination-icon">
<i class="fas fa-arrow-left"></i>
</div>
<div class="pagination-title-wrapper">
<h4 class="item-pagination-title">Previous</h4>
</div>
</a>
<!-- next -->
<a class="item-pagination-link item-pagination-link-next" href="#">
<div class="pagination-title-wrapper">
<h4 class="item-pagination-title">Next</h4>
</div>
<div class="item-pagination-icon">
<i class="fas fa-arrow-right"></i>
</div>
</a>
</div>
You just need to add justify-content: space-between; to item-pagination-prevnext class.
Related
I am having an issue with positioning in CSS. Now I have an icon and text like this :
Icon
But I want to make the icon go to the middle of the text. How do I do that?
You can use Flex.
Live code: Codepen
HTML:
<div class='alert'>
<span class='alert-icon'>icon</span>
<div class='alert-content'>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
<span class='alert-close-icon'> close icon </span>
</div>
CSS:
.alert {
background-color: red;
color:#fff;
display: flex;
align-items: center;
justify-content: space-between;
width: 250px;
border-radius: 6px;
padding: 10px 10px
}
Just add the images and replace them with the text inside .alert-icon .alert-close-icon
Just use display: flex and align-items: center on the parent container of two block of elements to aligns.
.inlineElements {
display: flex;
}
.alignItemsCenter {
display: flex;
align-items: center; /* Pack items around the center */
}
.content {
margin: 0 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="inlineElements">
<div class='alignItemsCenter'>
<i class="fa-regular fa-circle-xmark"></i>
<div class="content">
<div>
Hello
</div>
<div>
Display
</div>
<div>
Flex
</div>
</div>
</div>
<i class="fa-solid fa-xmark"></i>
<div>
I'm having difficulty vertically centering some SVGs from FontAwesome in a navigation component. I've recreated the problem in a much simpler example here. What I'm trying to achieve is to have the two icons and the text all vertically aligned regardless of their individual height. As you can see, the Apple logo is not quite at the same position as the other elements. I feel like maybe my problem lies in having everything nested in too many elements, but the SVGs also need to link to other pages, and I like to be able to have different spacing between the icons compared to between the icons and the title. Any advice is greatly appreciated!
.tool-bar {
background-color: gray;
display: flex;
height: 3em;
align-items: center;
}
.icons {
display: flex;
align-items: center;
margin-left: 0.5em;
}
.icons a {
margin-right: 0.2em;
display: flex;
align-items: center;
}
.icons a img {
height: auto;
}
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="tool-bar">
<a class="title">Title</a>
<div class="icons">
<a href="https://www.google.com/" target="_blank">
<i class="fab fa-google"></i>
</a>
<a href="https://www.apple.com/" target="_blank">
<i class="fab fa-apple"></i>
</a>
</div>
</div>
Wrap the <i> element containing the fontawesome icons in a <div>.
I have done that here in this snippet and added a style background red to show the div rendering. The issue is that in fontawesome icons, the Google G logo and the Apple logo don't appear proportionate although their containing divs are identical in sizes. That's partly why these don't look visually aligned. You can see this if you run the snippet.
.tool-bar {
background-color: gray;
display: flex;
height: 3em;
align-items: center;
}
.icons {
display: flex;
align-items: center;
margin-left: 0.5em;
}
.icons a {
margin-right: 0.2em;
display: flex;
align-items: center;
}
.icons a img {
height: auto;
}
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="tool-bar">
<a class="title">Title</a>
<div class="icons">
<a href="https://www.google.com/" target="_blank">
<div style="background-color: red;">
<i class="fab fa-google"></i>
</div>
</a>
<a href="https://www.apple.com/" target="_blank">
<div style="background-color: red;">
<i class="fab fa-apple"></i>
</div>
</a>
</div>
</div>
I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.
I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:
You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.
Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.
HTML CODE
<nav class="navbar is-fixed-top">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</nav>
CSS CODE
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
How can I get my navigation like that?
Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
Here a codepen to play with.
Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start navbar-start--centered">
<a class="navbar-item" href="">Products</a>
<a class="navbar-item" href="">Our Story</a>
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-item" href="">Blog</a>
<a class="navbar-item" href="">Contact Us</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
<span>Cart</span>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.
Then use normal flex positioning to set the contents of the second (right) container to be right aligned.
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
.nav-container{
display:flex;
flex:1;
justify-content: flex-end;
}
.nav-container a {
margin:0 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<nav class="navbar is-fixed-top">
<div class="nav-container"></div>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>
I have a frustrating problem with the otherwise great flexbox capabilities. I have the following layout with a centered column
The problem is, if one of the texts in the row grows or shrinks, then the FB/IG icons will not be in the same column line anymore. See what happens:
How can I achieve for variable width texts to not make the element grow to the left, but make the FB and IG icons actually stay in the same line no matter the variable texts??
Here is the code
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
<div class="test-wrapper">
<img class="test-img" src="path" />
<div class="test-links">
<a class="test-link">
<i class="fb"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig"></i>
<span>LongerText</span>
</a>
</div>
</div>
Thank you for your help!
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: left;
align-items: center;
width:100px;
margin:0 auto;
}
.test-wrapper
{
text-align:center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test-wrapper">
<img class="test-img" src="https://dummyimage.com/100x100/000/fff" />
<div class="test-links">
<a class="test-link">
<i class="fb fa fa-facebook"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig fa fa-instagram"></i>
<span>LongerText</span>
</a>
</div>
</div>
I used <img src="http://via.placeholder.com/20x20" /> instead of icons, so to render something. position: absolute for text does the job.
Following MDN's definition:
[position] absolute: the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
... so left:100% moves it to the left for whole width of parent's element, which is only an icon. You can create a distance between icon/image and text using margin-left for text. position: relative for link makes it a hook for position of absolute child.
You can adjust precise values.
Snippet
.test-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.test-links {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0 0 0;
}
.test-link {
position: relative;
}
.test-link span {
position: absolute;
top: 0;
left: 100%;
}
<div class="test-wrapper">
<img class="test-img" src="http://via.placeholder.com/50x50" />
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>Test</span>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>LongerText</span>
</a>
</div>
</div>
Since, span cannot take width, use p instead and then add the following class to you code:
.test-link p{
width: 50px;
height:auto;
word-break:break-all;
text-align:left;
}
And then you will achieve the desired format.
Here is a link to the fiddle supporting this answer.
Here is the snippet:
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
.test-link p{
width:50px;
height:auto;
word-break:break-all;
text-align:left;
}
<div class="test-wrapper">
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>Test</p>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>LongerText</p>
</a>
</div>
</div>
Hope this was helpful.
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>