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
Related
Try to align label position bottom of div
<div class="row"> //row is bootstrap
<div class="imgCover">
<img src="" style="height: 100%">
</div>
<label>Button</label>
</div>
try to add display inline and vertivcal align bottow to label tag but not work
insert label button to div and use display:flex for flexible items be the same length you can read here , and add align-items: end; to set position at bottom
div.row{
width:800px;
height:90px;
display: flex;
}
.btn{
width:50px;
height:90px;
display: flex;
align-items: end;
justify-content: center;
}
<div class="row">
<div class="imgCover">
<img src="https://cdn2.downdetector.com/static/uploads/logo/Google-new_19.png" style="height: 90px;width:auto">
</div>
<div class="btn">
<label >Button</label>
</div>
</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>
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
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.
How can I center 2 buttons vertically in my view?
For example:
<div class="container">
<div class="row">
<div class="col-md-5">
<h4>My List</h4>
<div style="height:400px; overflow-y:auto">
<ul>
// List of checkboxes
</ul>
</div>
</div>
<div class="col-md-2">
<input type="button" id="btnAddField" class="btn btn-primary" value="Add" />
<input type="button" id="btnRemoveField" class="btn btn-primary" value="Remove" />
</div>
<div class="col-md-5">
<h4>Selected Fields</h4>
// This will contain the list selected from the checkboxes.
</div>
</div>
</div>
I want the buttons in column 2 to be centered in relation to column 1 (which in this case I made height of 400px.
Try css Line Height. Hope it will help.
vertical-align: middle;
line-height: 400px;
If you can use flexbox, something like this would do what you want (using your existing classes):
.row {
display: flex;
[class^="col"] {
float: none;
flex-shrink: 0;
margin: auto 0;
}
}
You can add new class on row that will use Flexbox and vertically center items with align-items: center when width is > 992px which is breakpoint of md DEMO
#media(min-width: 992px) {
.flex-row {
display: flex;
align-items: center;
}
}