I have made a basic Tabs component following this documentation here.
This is my current output.
Does anyone know the CSS to align ant-tabs-tab at the center?
I can see that there are different position placement however there isn't a top-center option.
Current CSS:
.ant-tabs-tab {
flex-grow: 1;
margin-right: 0px;
width: 80%;
text-align: center;
}
The output from the above CSS. I would like to keep the same size as the first image but have it center aligned. Not sure if this is possible but I thought I'd check first.
Do you mean like this?
.ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
You have a property called centered in the Tabs component and all your TabPane will be centered.
<Tabs centered>
Related
I am currently making the footer of my project, and somehow every element I code seems to move every time I (or the user) resizes the window.
I have tried -
margin: 0 auto;
position: relative; float: left;
EDIT:
Code:
.pdiv{
/* div might be helpful? */
}
.footer {
position: relative;
left: 300px;
}
Try to use flexbox in your footer,
footer {
display: flex;
justify-content: center; // or flex-end, flex-start of your choice how you want them to look
align-items: center; // or same as above
}
Make yourself a favor and please use flexbox instead of floats, please, floats are not meant to do layout, this is more historical as before flexbox, there was no "universal" nor "adapted" way to compose clear layouts (dont start me on table's, plz).
This may help you:
https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ (Float to Flexbox migration)
https://flexboxfroggy.com - A game to learn Flexbox
I would like to grow an item (.sub-container) to the both ways when I validate my form, top and bottom, but when the error mesage appear, it only grow to bottom and I'm here all day long and I already change everything in my code but it didn't grow the both ways, it just grew bottom, the ".container" is where everything are inside, pls someone know how to do it?
.container{
width: 80%;
padding: 70px 0;
flex-direction: row;
align-items: center;
justify-content: center;
}
.sub-container{
display: flex;
flex-direction: column;
flex-grow: 1;
width: 50%;
}
before validate
after validate
The Flexible Box Layout Module, makes it easier to design flexible
responsive layout structure without using float or positioning.
Source # https://www.w3schools.com/css/css3_flexbox.asp
What you're trying to do as nothing to do with flexbox.
what you call "grow" is just default css behaviour. The only way to achieve what you want (Enlarging both height and width upon form submission) is realized by using javascript.
I'm trying to align an image in my bootstrap column to the right and have the text wrap around it on the left like this: https://codepen.io/freeCodeCamp/full/YqLyXB
I've been researching flexbox and vertical align all day instead of doing my job (woops) and feel like it's time to just ask the experts. Here's what mine looks like:
https://codepen.io/Seaplush/pen/rKVLmX
.col2 img{
max-width: 100%;
height: 50%;
float: right;
}
.col2{
background-color: #cccccc;
height: 50vh;
display: flex;
flex-wrap: wrap;
align-items: center;
}
Thanks for the help, this is my first website attempt so sorry if it's a bit of a mess to look through ;)
You can use the bootstrap columns. Just read and understand a bit more about Bootstrap grid.
Please, read the links bellow:
https://getbootstrap.com/docs/4.0/layout/grid/
https://getbootstrap.com/docs/4.0/layout/overview/
If you use bootstrap, why you not use bootstrap grid layout instead?
But if you try to use flex box instead, this is some hint...
you should set width for the text and the image...
set the parent of those 2 element to flex, and set the align-content.
example:
.parent{
display:flex;
align-content:space-around;
}
I use the WP Featherlight plugin on Wordpress. I want to put the description of an artwork in the lightbox right next to the image, not underneath like it is at this moment. How can I do that?
You can see the website here.
Hope you can help me out!
You have to change the css properties of your lightbox and the corresponding figcaption elements.
Refer code & make the changes accordingly:
.gallery-item {
display: inline-block;
text-align: left;
vertical-align: top;
width: 100%;
min-width: 260px;
}
.gallery-icon {
display: inline-block;
vertical-align: middle;
}
.gallery-caption {
display: inline-block;
vertical-align: middle;
width: 100px;
}
Attaching screenshot after the above changes are done:
1. Set your gallery container (e.g. div#gallery-2) to flex row.
Like this:
display: flex;
flex-flow: row wrap;
2. Set figure.gallery-item to flex and align it's text, provide a fixed width (I used 25%) so items stack in row, otherwise each item will be full width pushing the next down:
Properties:
display: flex;
align-items: center;
width: 25%;
3. Give .gallery-caption some breathe from image.
Properties:
margin-left: 5px;
Thanks for the response. If the user clicks on an artwork then the lightbox will open. I want the description is on the right side of the artwork. In the lightbox I want to put some more info than on the actual page. Hope this is more clear.
When I try to use flexbox to center items there is some overlapping content and misalignment.
https://jsfiddle.net/a9oc6gL8/1/
.footer_3 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 220px;
padding-bottom:100px;
}
.footer_4 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 190px;
}
To explain, I've drawn some extra rectangles to demonstrate what goes wrong.
The top-left and top-right columns together are as wide as the bottom-left and bottom-right bar, but are not the same ratio.
Now I could go and explain how to fix this, but I've noticed that you've been making a lot of mistakes throughout the document. I think it's more important that you try to get a little better at the basics, than trying the get the hang of flexbox.
Besides that. I've created a Fiddle that shows a fixed situation. I've given it a complete overhaul without flexbox.
What I've done, is create two columns that are both exactly 50% wide. They both float to the left. Like this, the text of the left and right side are always at the same spot. I've cleaned up the code (you were switching ul and li, using unnecessary classes, you used a plain ampersand (&) whilst you should type & when creating one... There was a lot wrong). Also. The '01', '02' etc. are now automatically generated with CSS.
The document has changed as a whole. I advise looking into it, and trying to understand what happens with every line of code. It'll sure teach you a thing or two.
Hope this helps
I've simplified your code. With these adjustments, your desired alignments come together:
CSS
.footer_3 {
display: flex;
width: 75%;
margin: 220px auto 50px;
}
.footer_4 {
display: flex;
width: 75%;
margin: 0 auto;
}
.about_description {
width: 100%;
}
DEMO