No matter how I style an element, none of the Flexbox styles I apply work. I have searched everywhere for a solution but could not find any (apologies if this is a duplicate as I could not find an answer to the problem).
I have created a CodePen here.
HTML:
<div class="test">
<div class="test2">
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.test {
height: 10em;
width: 10em;
background: #333;
}
.test2 {
height: 2.5em;
width: 2.5em;
background: #ff0000;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
text-align: center;
}
Thanks in advance for any help provided.
You need to add those CSS rules to the parent element instead.
When you set display: flex on an element, its direct children elements become flexbox items. In your example, the .test2 elements didn't have any children elements, so I assume you were probably wanting to add display: flex on the parent element instead.
.test {
height: 10em;
width: 10em;
background: #333;
display: flex;
align-items: center;
justify-content: center;
}
.test2 {
height: 2.5em;
width: 2.5em;
background: #ff0000;
}
<div class="test">
<div class="test2"></div>
</div>
Related
I've got some problems with specific element positioning. Could you give me any advice how to make it works?
It seems that buttons should be a part of content div but I don't really know how to do this. I tried many ideas but without any result.
Thanks in advance :)
My current code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<div class="item" style="background-color: red; height: 65px;">
<button>test</button>
</div>
<div class="item"></div>
</div>
I have no clue how to set div with buttons to be above header div. I tried with position relative but without success.
I know that it can be achieved by setting maring-top in container div. But is there any more elegant solution?
Well if you wanted to make a template as you mentioned above in the attached picture, I would say you won't need to define a new div above your container as the independent div and you should wrap all your header items into one division and make them flex with related justify-content and align-items, the flexbox with reacting to this as two different items that two of them (first button and header item) are wrapped into one div and the other one is a simple button (you can wrap it into another div too if you wanted) then with the justify-content: space-between they will force to the two endpoints of the division with space between them. Then you should do the same with your first wrapped items in div but in this one, you should add specific width to the division to make the justify-content: space-between work properly.
I add the simple code snippet below for more illustration, you can use it freely.
.header {
background-color: red;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background-color: yellow;
font-weight: bold;
border: none;
}
.header span {
color: white;
}
.header-left {
width: 130px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
max-width: 100%;
}
.item {
width: 200px
min-height: 400px;
margin: 0 40px;
padding: 100px;
background-color: lightgrey;
}
.item > p {
text-align: center;
}
<div class="header">
<div class="header-left">
<button>btn</button>
<span>header</span>
</div>
<button>btn</button>
</div>
<div class="container">
<div class="item">
<p>content</p>
</div>
</div>
If I am not getting it wrong, then you want the code of the button to be inside of container and on web page it should be shown on header. If this is what you are looking for then you can try the below code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: relative
}
.container button {
position: absolute;
top: -30px; // you can change it accordingly
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<button>test</button>
<div class="item"></div>
</div>
I'm trying to give style to this div, however, no CSS works on besides height and width. I am using bootstrap.
Although the border is red in this code editor, it is not when I'm editing in Brackets. Added some more code.
body{
padding: 100px 10% 0 10%;
}
#hero {
display: flex;
flex-direction: row;
width: 100%;
height: 750px;
justify-content: space-around;
}
.card {
height: 100%;
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid red;
border-radius: 7px;
}
.card-title-span {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
border-bottom: 1px solid grey;
}
.card-image {
width:100%;
height: 250px;
background-color: dodgerblue;
}
.card-pricing-span {
height: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
border-bottom: 1px solid grey;
}
.card-description-span {
padding: 3%;
font-style: italic;
}
<div id="hero">
<div class="card">
<span class="card-title-span">Beginner</span>
<img src="" alt="Placeholder image" class="card-image">
<span class="card-pricing-span">pricing</span>
<span class="card-description-span"></span>
</div>
<div class="card"></div>
<div class="card"></div>
</div>
[IGNORE THIS TEXT - Need to put it here so there's enough words to meet the auto-mods standards.]
Because .card is a standard BootStrap class. Use another class name or overwrite it.
First of all you should pay attention to the overrides that bootstrap or any template may apply to your DIV.
To do so, press F12 on your browser and go to Elements tab, select your div, watch for Style and you should be able to see if your style gets striked.
If that isn't your case, more likely you are using a bunch of CSS properties that conflict with display:flex and other properties.
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I'm trying to get one flex item to be centered vertically and horizontally.
I'd like for some text to be fixed to the bottom of the flex container.
margin-top:auto on the text just shoves the inner box to the top. Ideas?
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: goldenrod;
height: 30px;
width: 30px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Here's the codepen.
Try the below instead:
.box {
background:goldenrod;
height: 30px;
width: 30px;
margin: auto;
}
Here is one way of doing it.
Add position: relative to your .container CSS rule, and then use absolute positioning on .box to position the span to the bottom of the parent container.
You can center the text by allowing .box to have 100% width and then using text-align: center.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Since flexbox alignment involves the distribution of free space in the container, margin-top: auto won't work in this case because there's no counterweight on the other side.
Therefore, one method for centering the box and bottom-aligning the text involves creating a duplicate of the text element and placing it on the opposite side of the box. This will create a counterweight.
With equal balance on both ends, flex alignment properties (including auto margins) can work.
In this case, even justify-content: space-between would work.
Of course, you'll need to apply visibility: hidden to the duplicate element.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
margin: auto 0; /* or instead use justify-content: space-between on .container */
}
span:first-child {
visibility: hidden;
}
<div class="container">
<span>Text</span>
<div class="box"></div>
<span>Text</span>
</div>
OR, instead of a duplicate element, use a pseudo-element.
A less intrusive and more semantically proper method would use a pseudo-element as the duplicate. However, for this method to work, you would need to know the height of the actual element, because you would need to match it precisely.
Something like this will work to create equal balance:
.container::before {
content: "";
height: 15px; /* must match actual element's height */
}
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
height: 15px;
}
.container::before {
content: "";
height: 15px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
I'm pretty new to CSS and I'm trying to vertical-align: middle some text inside a div. This has been asked before, but I can't get any of the solutions to work for me, so I must be missing something obvious.
I've tried:
Having the text in a <p> tag and in CSS adding vertical-align: middle; to the <p> tag.
Having the text in a <p> tag and in CSS adding vertical-align: middle; to the parent div.
Having the text in a <div class="flex-container"> and in CSS adding
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
As here: https://jsfiddle.net/dt3kvmdm/
The parent div doesn't have a fix height in px. Instead it's a percentage. One solution to a similar question suggested that this could be a problem, but I'm not clear on it. It would be helpful to me to be able to keep it as a percentage.
I'll be very happy to hear any suggestions!
Thanks a lot!
Nick.
You need to use display: flex on parent element or set height: 100% on child element Fiddle
.ProjectTitle {
background-color: green;
position: absolute;
width: 100%;
height: 20%;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.flex-container {
font-family: "Taviraj", serif;
color: #000;
letter-spacing: 0.11em;
}
<div class="ProjectTitle">
<div class="flex-container">
Project Title
</div>
</div>
I'm not sure if I completely understand what you're wanting, but see if this helps:
HTML:
<div class="ProjectTitle">
<div class="flex-container">
<p>Project Title</p>
</div>
</div>
CSS:
.ProjectTitle {
background-color: green;
position: absolute;
width: 100%;
height: 20%;
bottom: 0;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
font-family: "Taviraj", serif;
color: #000;
letter-spacing: 0.11em;
line-height: 20%;
height: 100%;
}
.flex-container p {
color: #ffffff;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dt3kvmdm/1/
I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.
Example
HTML:
<div class="inner">
<div class="section green">
<img src="http://i.imgur.com/hEOMgVf.png">
</div>
<div class="section red">
<img src="http://i.imgur.com/nEybO1g.png">
</div>
</div>
CSS:
.inner {
float: left;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
}
.section {
float: left;
flex: 1;
}
.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }
My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?
Here's a simplified JSFiddle of what I have:
http://jsfiddle.net/beK28/1/
To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .section to also be display:flex. Then you can justify and center the images correctly within the children elements.
.section {
align-items: center;
display: flex;
flex: 1;
justify-content:center;
text-align: center;
}
http://jsfiddle.net/beK28/8/
You also don't need to use float, that's the whole point of using flexible containers.
Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: center instead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.
http://jsfiddle.net/beK28/6/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
background-color: #343434;
text-align: center;
height: 500px;
}
Note, however, that you can have flex items with the display property of table-cell.
http://jsfiddle.net/beK28/7/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
height: 500px;
}
.section {
display: table-cell;
flex: 1;
}
I've had problems with stretch/centering before, and ended up formatting as display: table-cell:
.inner {
float: left;
width: 500px;
display: table;
background-color: #343434;
text-align: center;
}
.section {
display: table-cell;
width: 50%;
vertical-align: middle;
}