Example Picture Don't worry about the look of it. I'm trying to align the input and the anchor horizontally with the logo using flexbox. Example attached. The logo will be on the right and the input with the anchor will be on the left but all horizontal.
<div class="small-12 cell footer-logo-container">
<a href="#">
LOGO
</a>
<div class="footer-email">
Sign Up for the Rock River Report Here
<input class="footer-input" type="email" placeholder="email">
<a href="#" class="link">
<div class="link-text">
SUBSCRIBE
</div>
</a>
</div>
Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Useful website for most of your CSS. If I understood what you wrote correctly you could use this code:
.footer-logo-container {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.footer-email {
display: flex;
}
<div class="small-12 cell footer-logo-container">
<a href="#">
LOGO
</a>
<div class="footer-email">
Sign Up for the Rock River Report Here
<input class="footer-input" type="email" placeholder="email">
<a href="#" class="link">
<div class="link-text">
SUBSCRIBE
</div>
</a>
</div>
use the following css code, it should work fine:
.footer-logo-container{
display: flex;
flex-direction: row-revers;
align-items: center;
justify-content: space-between;
}
In flexbox there is three important concepts: flex-direction, align-items and justify-contents.
flex-direction establishes the main-axis, thus defining the direction flex items are placed in the flex container.
In your case you need a flex container which should have display: flex style and you need to set align-items: center and justify-content: space-between.
You can change the order of your elements in html based on your design.
CSS:
.footer-logo-container{
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="small-12 cell footer-logo-container">
LOGO
<div class="footer-email">
<p>Sign Up for the Rock River Report Here</p>
<input class="footer-input" type="email" placeholder="email">
<a href="#" class="link">
<div class="link-text">SUBSCRIBE</div>
</a>
</div>
</div>
CSS -
.footer-logo-container{
display: flex;
flex-direction: row-revers;
align-items: center;
justify-content: space-between;
}
.footer-email > p {
display: inline-block;
}
.footer-email > input {
display: inline-block;
}
.footer-email > a {
display: inline-block;
}
jsFiddle
Related
This is my first question here and this is also one of my first codes ever so please be understanding :D
I need to create something like this: https://i.stack.imgur.com/mH18n.png.
I don't know what I can do to make span class="price" to the next line. This is still in the same line with class="annual".
Here is my HTML code:
<div class="priceinfo">
<img src="order-summary-component-main/images/icon-music.svg" />
<span class="annual">Annual plan</span>
<span class="price">$ 59.99/year</span>
<a class="change" href="">Change</a>
</div>
And here is my CSS:
.priceinfo {
display: flex;
justify-content: space-between;
align-items: center;
}
Do you have any ideas what I did wrong and what can I correct?
Thank you in advance!
you can wrap both of your spans in a div with display:'flex' and set its direction to column:
<div class="priceinfo">
<img src="order-summary-component-main/images/icon-music.svg" />
<div class='price'>
<span class="annual">Annual plan</span>
<span class="price">$ 59.99/year</span>
</div>
<a class="change" href="">Change</a>
</div>
and CSS file:
.priceinfo {
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
display: flex;
flex-direction: column;
}
You can just add a line break (<br/>) after each span:
<div class="priceinfo">
<img src="order-summary-component-main/images/icon-music.svg" />
<span class="annual">Annual plan</span><br/>
<span class="price">$ 59.99/year</span><br/>
<a class="change" href="">Change</a>
</div>
I want to add a second Pokemon Ball on the same line and make it on the far right side and I will remove the search function as its only Gen 1.
I have two Pokemon Balls now, here is the image:
Here is my source code in HTML for the images:
<a class="navbar-brand" href="#">
<div class="floatLeft">
<img src="img/pokemon_logo.png" height="40%" width="50%" alt="Pokemon Logo" />
</div>
<h1><strong>Gen 1 Pokemon</strong></h1>
<div class="floatRight">
<img src="img/pokemon_logo2.png" height="40%" width="50%" alt="Pokemon Logo"/>
</div>
<!-- <img src="img/pokemon_alt.png" height="20%" width="20% "alt="Pokemon Logo"> -->
</a>
<!-- This is where we can search for pokemon -->
<!-- <form class="form-inline">
<input class="form-control mr--2" id="search-pokemon" type="search" placeholder="Search for Pokemon" aria-label="Search">
</form> --> </nav>```
This is what I have in CSS:
.floatRight{ float:right; clear:right; margin-left:1400px; }```
I have tried align, float and all that cannot seem to figure it out.
Any help would be appreciated!
try to not use floats, they are a bit "old" for todays standards.
For this purpose you can use Flexbox - more about it here:
Flexbox
.navbar-brand {
display: flex;
align-items: center;
justify-content: space-between;
}
Remove the float right and float left styles and class from html.
set the style
`a {
display: flex;
justify-content: space-between;
align-items: center;
}`
You could use display: flex; and justify-content: space-between; to achieve this
.content {
margin: 50 auto;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="content">
<p>🌹</p>
<p>🌹</p>
</div>
So I was trying to line-break my 2 anchors that i did using the <a> tag. They are inside a flip box.
Basically right now I have my 2 anchors inline but the problem is that I'm using flexbox on the container and I'm not really sure how I could break the 2nd anchor so it would be below my 1st anchor.
My HTML code : Codepen Link
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; align-items: center; justify-content: center;" class="flip-box-back">
<i class="fas fa-download"></i>
<a href="#" download>download</a>
<hr>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
I alreay tried the <br> and <hr> on HTML but without success.
Example :
Thank you in advance, would be very grateful
You should add flex-flow: column; to your div which wraps your buttons
div {
display: flex;
flex-flow: column;
}
<div>
<button>1</button>
<button>2</button>
</div>
In your case you have to wrap each link and including the icon inside an element such as a div. Otherwise your icon and div will be placed all below each other and not just the 2 "buttons".
Then you can place each wrapped element by adding flex-direction: column;
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;" class="flip-box-back">
<div>
<i class="fas fa-download"></i>
<a href="#" download>download</a>
</div>
<div class="break">
<i class="fas fa-eye"></i>
view
</div>
</div>
Normally a flexbox is no-wrap so you need to add a property to let it break if there is no space left for 2 elements (also you can define the horizontal alignment to centered with justify-content) :
.flexbox{
display: flex;
}
.flexbox2{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flexbox3{
display: flex;
flex-direction: column;
align-items: center;
}
button{
width: 60vw;
}
Default:
<div class="flexbox">
<button>Button1</button>
<button>Button2</button>
</div>
With (auto) wrap:
<div class="flexbox2">
<button>Button1</button>
<button>Button2</button>
</div>
With forced wrap (column view):
<div class="flexbox3">
<button>Button1</button>
<button>Button2</button>
</div>
Most of the things I create I need centered, but able to scale if necessary, so I use a table layout to help center content as I've done for years. However, wit the introduction of flex I believe this has been made more efficient ( less html ). I've done some research but haven't gotten to a proper cross-browser solution in the time alloted.
So very simply, I need to replace the following code:
<style>
.app-frame {position:fixed;top:0;left:0;width:100%;height:100%;}
.app-frame td {vertical-align:middle;text-align:center;}
.app-content {display:inline-block;border:1px solid gainsboro;max-width:600px;position:relative;}
</style>
<table class="app-frame">
<tr>
<td>
<div class="app-content">
<!--app-->
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
<!--/app-->
</div>
</td>
</tr>
</table>
with a solution that allows me to use divs, like so:
<div class="app-frame">
<div class="app-content"> ... </div>
</div>
These are the settings (for the container element) with which you can center all included elements vertically and horizontally using flex:
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="app-frame">
<div class="app-content">
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
</div>
</div>
This is how to horizontally center a div with css flexbox:
.app-frame{
display:flex;
justify-content:center;
align-items:center;
width:100%
}
<div class="app-frame">
<div class="app-content">Centered DIV</div>
</div>
It's more flexible as you can change your layout without touching the HTML.
I'm using a flex container to place a button so that it abuts an input on its right border. I can't get the input to be horizontally centered. How to center it, without eliminating the display: flex?
.flexContainer {
display: flex;
}
<div style="text-align:center">
<div>Enter the search term</div>
<div style="text-align: center">
<div class="flexContainer">
<input id="abc" />
<button id="search" name="search" type="submit">go</button>
</div>
</div>
</div>
Here's the fiddle: https://jsfiddle.net/wpd3b0kt/1/
Just add justify-content: to the CSS:
.flexContainer {
display: flex;
justify-content: center;
}
fiddle update