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.
Related
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.
So... I got this code: https://jsfiddle.net/jmg63s3e/1/
The code actually works fine if you resize the browser window until you have the text inline with the image and that's what I'm trying to achieve, but if you resize it down eventually the text drops below the image even if the wrapper width is a lot smaller than the window width.
My only purpose is to have:
the whole wrapper centered both vertically and horizontally in the browser window. Its total width and height unknown, depending on its children
row1 and row2 must not be inline: row2 must be below row1
All the elements inside row1 (the image and the text containing 2 spans) must be inline with each other
And well, the spinner inside row2 must also be centered inside the row but that was never a problem whatever solution I tried
As a matter of fact the only dynamic element in the whole code is the first span which in the example contains Player #1, since it should be the name of the player and it can be anything, any length.
Of course if I wanna make it responsive I will have to use media queries or dynamically change widths and heights and font-sizes with JS, and I'm willing to do so. My problem here is only the wrapper itself and the text that drops below the image even if the wrapper width is a lot smaller than the window width, so I'm asking for a solution that works as long as the wrapper width is smaller than the window width. When the wrapper width drops below the window width, I will handle the style with responsive media queries or JS. I would just like to have the wrapper to be centered both vertically and horizontally in the window, and its size to be dynamic and depending on children.
I've already tried any solution I could think of, but with an unknown wrapper width I just can't figure it out. Can someone help me please? I'm open to any suggestion and any solution, as long as it's pure CSS and it doesn't involve JS. Thanks everyone in advance
You can use flexbox to fix these problems.
Here's an updated fiddle with old CSS commented out: https://jsfiddle.net/jmg63s3e/3/
First, to align the wrapper both horizontally and vertically you need to make the parent container a flex container with display: flex and use justify-content: center and align-items: center. You also need to set a height or else it will wrap to the height of the child and not give you the centering effect. I used the following. The height can be whatever you need it to be.
.trump-waiting {
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
overflow: hidden;
height: 100vh;
}
Next, I used display: flex on the wrapper and flex-direction: column to make sure they are all lined up like we want them to be.
.trump-waiting .wrapper {
display:flex;
flex-direction:column;
To fix row1, again I used flexbox and removed the inline-block and the set height. You could set the height as long as you take care of resizing the font in the text divs, with media queries for instance. Otherwise, with an explicit height, the font at the size it's at now will break out of their containers. Without explicitly setting the height, the containers will adjust in size.
.trump-waiting .row1 {
display: flex;
flex-direction: row;
/* display: inline-block; */
/* height: 60px; */
background-color: yellow;
}
I also added flex-shrink:0 to .image to keep it from shrinking on resize.
To keep Player #1 and 'is choosing the trump suit' inline, I also added display: flex and flex-direction: row to .row keep them on the same line.
Finally, to align the loader, I did the vertical/horizontal alignment trick used above, plus added some padding to the div to give it some space and removed the old css.
.trump-waiting .row2 {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0 16px 0;
/* display: block; */
/* margin-top: 50px; */
The last step would be to use media queries to adjust the font-sizes on .text spans so the font doesn't expand their container on resize.
Many ways to skin a cat and I'm sure others will have different perhaps better solutions, but hope this helps. There's a great summary of flexbox here if you need it. I may have left out a change in this summary, but it should all be in the fiddle.
EDIT: Realized I made a mistake summarizing the css in the jsfiddle and also removed a redundant css property. Now updated.
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.
It's hard to explain, but I'll try. I am trying to create a grid of divs that will never go off the page horizontally. Hence, the bottom scroll bar will never show. Instead, divs that are pushed off the window will wrap to the next row. There may not be as many divs on the bottom row as there are on the previous. In this case, the divs on the bottom row must be centered in the window. As the window resizes, the margins between the divs should expand or shrink to equalize the space between them. If the window resizes enough, the number of columns should change to fit the divs. Hopefully this image will help:
float:left and display:inline-block are close, but they don't resize margins and are not centered. I would like this to be done with pure CSS and HTML, but I do know JavaScript if it is necessary.
You can achieve this by using flexbox
Demo
The key parts are:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}
.grid > div {
flex-basis: 300px;
}
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