I am trying to align me kitchen sink cards horizontally here is a picture of the cards.
(https://i.stack.imgur.com/4JIXc.png)
These cards ⬆️ are not aligned horizontally as you see I want them aligned horizontally I tried many CSS & HTML codes but none worked.
This is one line of code I tried:
CSS: float:left;clear:none;
you can use a css property called display: flex; i that the default flex direction is row is already enabled. so you can use this property for your cards main root element.
You can use:-
display: flex;
justify-content: center;
on parent element, to horizontally centered the item. There are other values also for justify-content which you can use to align as you want.
In bootstrap, you can simply use classes:-
d-flex justify-content-center
on parent element, to horizontally centered the item. Similarly there are other classes also. You can see bootstrap docs.
Related
It's very easy to align all of your elements by just setting the parent div as display: grid and aligning the child elements with place-items: center but how does it compare to centering your elements with the margin property performance wise?
I'm finding myself putting grid on every parent, just to align items. Are there other downsides to using grid except that your parent has to be a grid element?
I was wondering if someone can help to center text on about page within body, without changing dynamic page height calculation.
here is page:
https://protasov.by/contacts/
here is jade/pug code
section.container-fluid
.row(style="padding-top:20px;").centered-form.center-block
section.container(style="display: flex; align-items: center; justify-content: center;").col-md-10.text-center
.wb-stl-normal(style="margin: auto; align-self: center;")
p
em TEXT
| TEXT TEXT
br
span.wb-stl-small TEXT TEXT
br
I tried different approaches and can't achieve any visible result that will help me to center text in the middle of block "section.container-fluid" so that it be perfectly aligned H/V in page canvas.
You can use bootstrap flex-box classes
to align horizontally use
.d-flex .align-content-{x} where 'x' could be center, around or between
to align vertically use
.d-flex .align-items-{x} where 'x' could be center, stretch or baseline
Reference to bootstrap flex-box classes here
You can learn more about css flex-box here
I added in wb_main height in precentage, set minimum.
then added d flex, and h 100 classes, and now vertical alignment works perfect.
I am a beginner trying to do the following in css / html:
I have two floating elements, one on the left, one on the right. I want these two elements to be vertically centered in a wrapper that has no defined height. I only found a solution for the case when the wrapper has a defined height, but my wrapper can have various heights as the text content is dynamically added.
Thank you for helping me.
You're best of using flex box. On the parent element, i.e. the div, do the following:
display: flex;
flex-direction: column;
justify-content: center;
This will then ensure no matter how many items you have in the child element they are always aligned vertically. You can then align them horizontally with align-items: center;
A visual representation is shown here:
http://codepen.io/pauljohnknight/pen/oZLJPG
Paul.
I am trying to build a completely centered slider with images in different sizes.
I used flexbox to center the div of the slider and now I have to center the images inside it. I tried to use flexbox in there as well but it didn't seem to work for me.
I uploaded it here so that you can see whats wrong.
It's because your container is too big. Your container should be as big as your images OR you should put display:flex; justify-content:center; align-items: center; on the container that contains the images.
Either way, your container can't have a width of 100% or the inside will never be aligned to the center...
Just edit your css style by adding this:
.slider img {
margin: 0 auto;
}
I am working on a page where I would like a responsive img to align to the left of my section flex container, and the h1 & p text the right of the image, using flexbox.
I have more text and elements in the section flex container, but I would like them to be below the img.
Goal:
I am using codepen as a sandbox to get things done. But for some reason, the h1 is not horizontal but aligning vertically. The image is not keeping it's aspect ratio as the screen size decreases. And the rest of the elements won't stack below each other.
For small screens I would like the elements to just stack below each other in this order:
img
h1
p
a
a
etc...
I am working on a page where I would like a responsive img to align to the left of my section flex container, and the h1 & p text the right of the image, using flexbox.
But for some reason, the h1 is not horizontal but aligning vertically... And the rest of the elements won't stack below each other.
What you're missing are nested flex containers.
You can convert an element into a flex container with display: flex or display: inline-flex. Then all the children of this container become flex items and accept flex properties.
But you can also make flex items into flex containers.
This enables you to mix rows and columns deep into the HTML structure.
I've made some basic revisions to your codepen, as an example: http://codepen.io/anon/pen/xVamQQ?editors=1100
I altered the structure in order to accommodate alternating pattern of row and column flow. It looks like you already have a grasp of the fundamentals of flexbox. What I am concerned with is the lack of any padding and the height given to main was 1000vh. That's literally 10 viewports stacked on top of each other.
main { background-color: Gainsboro; height: 1000vh; overflow-y: scroll; }
CODEPEN