Lately I was creating a searchbox for my website, but I wanted it to be constantly centered in every y and x dimension.
I have div container searchbox:
.searchbox {
position: absolute;
text-align: center;
width: 100%;
left: 0%;
top: 55px;
height: 115px;
background-color: black;
}
Inside searchbox container, I made special mover container:
.mover {
margin: 0 auto;
width: 50%;
}
As you see width is 50% because I thought it would center it, but it didn't, and margin is automatic, which I don't think even works without 50% width.
Full code and Result.
I think my style is kinda messed up and there are useless things which may affect automatic margin.
What may the problem be? does margin: auto; doesn't work with current position of div? What do I need to change? If not, what's the problem?
I will be very thankful if you upload solution on my current fiddle.
UPDATED ANSWER
Here is correct code: https://jsfiddle.net/uda77168/7/
First...
1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.
Center Vertically
1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.
html, body {
width:100%;
height:100%;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. Next, we need to define <body> as a flexbox and give it some flexbox properties:
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can just copy-paste flexbox code like the one above from here.
Center Horizontally
1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):
<div class="horizontal-flexbox"></div>
.horizontal-flexbox {
width: 100%;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.
.horizontal-flexbox > div {
width: 33.3%;
margin-top: 10px;
}
3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!
Your input.search class has a specified width in px which is larger than the container.
.search {
width: 100%;/*changed this line*/
height: 35px;
margin-top: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.
Use this:
.searchbox {
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
}
And
.mover{width:50%;}
Related
I have the code here but basically the problem is I have these product cards and I am trying to get them in the center but also align them with the other cards if that makes sense.
https://codepen.io/manfreebie/pen/NWNvyGz
Here is a visual of what I want to accomplish vs. what is actually happening. It looks fine at first till you try to resize it.
I have tried to make the cocktail-container have the value flex-start instead of center for the justify-content attribute like this
#cocktails-container {
max-width: 70%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
but that leaves a lot of whitespace on the right side when I resize it. I have tried playing around a little bit with inline-block and using text-align instead but that didn't work either.
Add this code.
#cocktails-container::after {
content: "";
flex: auto;
}
I am only sharing parts that I changed, the rest is the same.
#cocktails-container {
width: 70%; // You can adjust this for your needs
display: flex;
flex-flow: row wrap;
justify-content: start;
}
// Removed margin from .cocktail but added padding to the a tag
.cocktail {
width: 100%;
height: auto;
padding-top: 10px;
text-align: center;
}
a {
width: 33%; // You should adjust this for different screen widths, mobile 100% large 25% etc.
padding: 15px;
box-sizing: border-box; // This is necessary to include padding in '33% width'
}
Please try this code,To How do I center these items properly?
.box {
display: flex;
align-items: flex-start;
height: 200px;
}
.box .selected {
align-self: center;
}
<div class="box">
<div class="selected">Three</div>
</div>
I hope this code will be useful for you.
Thank you.
The issue that I identified while checking the code is that you are using a margin margin: 50px 0px; for the .cocktail class. Change it to the below one.
#media (max-width: 800px) {
.cocktail {
width: 60%;
margin: 50px auto;
}
}
Giving margin value 50px 0px; will make the left and right margin to zero in the samller resolution. Update that to 50px auto that will give left and right margins auto value.
guys, can't understand how it works.
.butts {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-left: 40px;
}
.butt {
width: 120px;
height: 50px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
Want to change button size with resizing the browser.
put for properties "padding" in button class.
Or
Change height and width button.
auto-resize buttons for responsive design
you can refer to this answer for your issue as you can set the max-width:100% for the whichever button to resize in your browser.
I have been developing a website using bootstrap-4 and I am using a container class (responsive class on bootstrap) on this title inside of my . The only problem I have is that my navbar has half transparency and it is going to the top of the page and if you click on the image you see a white box and I would like the text to be restricted to that size in those borders lines.
Link to image
The reason I would not like to use top or bottom is that it messes up with my responsiveness on mobile devices etc.
I also believe that one of the reasons this is getting issues is because of my header.
Here is some code
<header>
<div class="container">
<h2>"We specialise in interiors and upholstery for automobiles</h2>
<p>supercars, classic cars, modern cars and motorbikes."</p>
</div
.
Here is my css for the header
height: 30vh;
position: static;
background-size: cover;
background-image: url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png";
.
Not 100% sure on any of the display properties that the .container class would use in Bootstrap as I don't use it. But adding display: flex; to .container and using flexbox will do the trick.
CSS Code:
header {
/* change height accordingly */
height: 30vh;
position: static;
background-size: cover;
background-image:url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png");
width: 100%;
}
.container {
height: 100%;
width: 100%;
display:flex;
align-items: center;
justify-content: flex-end;
flex-flow: column nowrap;
}
Codepen Link
https://codepen.io/oliverheward/pen/jOEvPby
Better browser support:
header {
/* change height accordingly */
height: 30vh;
position: static;
background-size: cover;
background-image:url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png");
width: 100%;
}
.container {
height: 100%;
width: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
I have two questions.
first,
I have a form and I'm trying to center everything to the center of it and in the same time align the text to the left side of the fields.
I'v tried to give justify-center and align-items to the "container" class and to the "form-style" class and nothing works.
Part of the code and a Codepen link
.form-style {
width: 50%;
position: relative;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
And,
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
Second,
I'm trying to make my submit button to get 100% width and nothing - there's space at the sides,
input[type="submit"] {
display: block;
background-color: #08ABD9;
font-family: 'jura', sans-serif;
font-size: 16pt;
font-weight: bold;
height: 40px;
border: none;
margin-top: 40px;
margin-bottom: 0px;
width: 100%;
}
Start here: There's a syntax error in your code. The display: flex on the container is not being recognized due to the presence of an invisible character. None of the flex properties are working.
So first fix that. Just delete the line entirely and re-write display: flex. You will notice major changes in your layout.
Second, your flex-direction is set to column on your label/input containers. That stacks your form elements vertically.
#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
display: flex;
flex-flow: column wrap;
width: 100%;
margin-left: 40px;
}
If you want the text and input to line up in a row, use flex-direction: row.
Lastly, with regard to your submit button, your container has left and right padding which prevents the button from reaching the edges.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Once you remove the padding rules, the button will extend from edge to edge.
I'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>