I'm learning CSS now and trying to imitate Youtube's homepage.
But I don't know how to set this input in the middle of this .input-box
Please help me to solve this problem.
I tried to search it on Google, but the solution will change the margin and i don't know how.
Here is my code.
HTML:
<div class="input_box">
<input type="text" placeholder="Search">
</div>
CSS:
.input_box {
box-sizing: border-box;
width: 519px;
height: 26px;
}
.input_box>input {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1px 0 1px 0;
margin: auto;
border: none;
outline: none;
font-family: inherit;
box-sizing: border-box;
background-color: #11274c;
font-size: 100%;
}
I set the background color this way to make it easier for me to tell
.input_box {
display: flex;
align-items: center;
}
You may add the above style to your input box's outer div so that it will behave as a flexbox container vertically aligning its items.
To align items horizontally you can add justify-content: center;.
.input_box {
box-sizing: border-box;
width: 519px;
height: 26px;
margin: 0 auto;
float : none;}
Related
I used display: flex and justify-content: center to center the img within the div, it did in fact center the img but it shrank the img to a very small size. How do I center the img without having it shrink? I included a picture of this. I also tried re-sizing it with .img-star img { width: 3em; }, but it doesn't work. Pls help thanks.
.img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
}
Not use flex. Use this CSS:
div {
text-align: center;
}
Don't use flex. just use this on your div
div {
text-align: center
}
Adding the align-items: center property could potentially fix it. It will also center the image vertically, if that is wanted.
I tried it with a div and it worked as intended It also appears to be fixing distorted images, such as this answer
img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
set img display to block and set left + right margins to auto, e.g.
.img-star {
margin: 30px auto;
display: block;
padding: 20px;
border: 1px solid white;
border-radius: 50%;
width: 45px;
height: 45px;
}
You have also set the width of this class at 45px, so when this class is applied to an img it will be shrinking it to 45px. Try upping the width and height. width: 100%; height: 100%; will preserve your original image size to the max size of the block the image is in. Changing it based on px or em will set it to that e.g. width: 300px;.
I am trying to decrease the margin between the (header__title-title) and the first item (header__title-symbol) in the flex container. I can't seem to get anything to work. Any suggestions? The main axis is vertical since I have the flex-direction set to column
<div class="header__title">
<div class="header__title-symbol">
<span class="span-one"><hr id="hr-one" /></span>
<span id="symbol">⬙</span>
<span class="span-two"><hr id="hr-two" /></span>
</div>
<div class="header__title-title">
<h1>The Website title!</h1>
</div>
</div>
.header__title {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header__title-title {
letter-spacing: 4px;
color: white;
font-size: 2.5rem;
text-shadow: 0 4px 4px #d19224;
animation-name: moveInLeft;
animation-duration: 1s;
font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.header__title-symbol {
display: flex;
flex-direction: row;
align-items: center;
}
hr {
width: 27rem;
display: inline-block;
height: 0.3rem;
background-color: white;
}
I think your problem does not related to CSS flex property. you could add these lines in your CSS file:
*, *::after, *::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This code resets the margin and padding of all elements in your html file. Then you can set each amount of margin or padding that you want to the .header__title-title class that is suitable for your design. for example:
.header__title-title {
padding-top: 20px;
}
There are multiple ways by which you can achieve this.
Add a margin-top or margin-bottom; to the ones you want to add space.
When you add display: flex and flex-direction: column, then by using justify-content: space-between;
Hope this works for you.
I am trying to acomplish something that should be easy: centering an a tag inside a div. I know this is a classic, that there are similar questions out there, and also that can be done with flexbox, but I am trying to avoid the latter.
.wrapper {
background-color: gold;
height: 200px;
width: 100%;
position: relative;
text-align: center;
vertical-align: middle;
}
a {
border: 4px dashed white;
height: 95%;
width: 95%;
display: block;
box-sizing: border-box;
}
<div class="wrapper">
<a>
Link
</a>
</div>
Any help will be welcome!
EDIT: I would like the a tag to be flexible and fill the wrapper, without knowing the height of the wrapper.
Add line-height in wrapper div
.wrapper {
background-color: gold;
height: 200px;
width: 100%;
line-height:200px;
position: relative;
text-align: center;
vertical-align: middle;
}
a {
border: 4px dashed white;
height: 95%;
width: 95%;
display: block;
box-sizing: border-box;
}
<div class="wrapper">
<a>
Link
</a>
</div>
inspired by:
Flexbox - Vertically Center and Match Size
fiddle with the problem:
http://jsfiddle.net/Nbknc/22/
what i try to achieve:
I want to get the text of the second button to start at the same height as the text on the first button.
HTML
<section class="buttonsSection">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</section>
CSS
.button {
padding: 10px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
height: 500px;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
a photo of how i want it to look
EDIT the reason I use flexbox and justify-content is to make it work with different screen sizes. Space is perfectly distributed with flexbox. Adding a padding is suboptimal as it will stay the same, even if the screen has a height of say 200px.
Here is one way, one where I added an extra wrapper that centers
.buttonsSection {
display: flex;
flex-direction:column;
justify-content: center;
height: 400px;
border: 1px solid;
width: 200px;
margin: 0 auto;
}
.buttonsWrap {
margin: 30px 0;
display: flex;
}
.button {
padding: 50px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
}
<section class="buttonsSection">
<div class="buttonsWrap">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</div>
</section>
You can accomplish this by removing the flexbox properties from the button and adding a span around your button text with the following CSS:
position: relative;
top: 50%;
transform: translateY(-50%);
You may need to play with those percentages to get things to line up ideally, but this gets you in the ballpark.
http://codepen.io/angeliquejw/pen/QNdrOZ?editors=0100
I updated the fiddle
Suggest if its not that you require.
http://jsfiddle.net/Nbknc/30/
.button {
padding: 50% 15px 0 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
}
.buttonsSection {
margin: 30px 0;
display: flex;
flex-direction:row;
height: 500px;
}
Now its much simpler , now you can add the required padding to your button
so that the text in both button will align with equal top padding .
UPDATE
included some changes to your html and css
http://jsfiddle.net/Nbknc/32/
Edit: http://jsfiddle.net/Dneilsen22/36yL3y5m/5/
Removing the justify-content for .button and increasing the top padding would accomplish this.
.button {
padding: 100px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
}
I have two buttons next to each other using flex and I have their contents vertically centered, which work great so far. However, when my site is viewed on mobile pages (using responsive design to scale the page), the second button, which has less text in it becomes a different size than it's companion.
So, the goal is to vertically align the text on my buttons as well as to have the two buttons always match each others size.
<section class="buttonsSection">
<a class="button" href="#">Very Long Word</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 20px 10px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/
If the problem isn't obvious right away, try reducing the width of the Result window.
Solution inspired by this question, was to set the buttonsSection to flex and center, and setting the button to flex, column and center.
See Fiddle here: http://jsfiddle.net/Dragonseer/Nbknc/
.button {
...
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
}
Just add align-items: stretch; to .buttonsSection
see that Working Fiddle
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
align-items: stretch;
}
also: when using flex you'll have to pay attention to the vendors specific prefix's.
read more about it here
Update:
If you're using my original proposal, you can also control the vertical-alignment.
check out this Working Fiddle
HTML: (same)
Very Long Word
Short Phrase
CSS:
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
.buttonsSection
{
margin: 30px auto;
display: table;
border-spacing: 3px 0;
}
.button
{
display: table-cell;
vertical-align: middle;
padding: 10px 15px;
background-color: deepskyblue;
color: white;
text-align: center;
max-width: 100px; /*Or any other width you want*/
}