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.
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.
These two ways to move a button to the right of its parent seem completely equivalent to me. Is there a reason to choose one over the other? Are there circumstances in which flex works to align content to the right where text-align might not suffice?
.parent {
text-align: right;
}
<div class="parent"><button>Awesome button!</button></div>
.parent {
display: flex;
justify-content: flex-end;
}
<div class="parent"><button>Awesome button!</button></div>
I'm curious because I noticed that Bootstrap changed from text-align: right to flex between versions 3 and 4 for aligning buttons in a modal's footer section.
To illustrate further:
Yes there is a big difference. Flexbox is about boxes and block level element whearas text-align is about text and inline level element.
When having one element we won't notice the difference but when it comes to multiple element we can see a clear difference.
Here is a basic example where we have text and button inside a container:
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
<div class="parent-flex">some text here <button>Awesome button!</button></div>
<div class="parent-normal">some text here <button>Awesome button!</button></div>
Note how in the flex container we no more have white space between the text and the button because the text will become a block element1 and the button too which is not the case in the second example where both are inline element. Until now, it's ok because we can rectify this with margin.
Let's put more text and see the difference again:
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>
<div class="parent-normal">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>
Now we have a clear difference and we can see that the flex container consider all the text as a block element and the button will not follow the text like in the second container. In some case it can be an intended result but not in all the cases.
Let's add a link inside our text:
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text link here some text here some text here some text here<button>Awesome button!</button></div>
<div class="parent-normal">some text here some text here some text here some text here some text here some text here some text link here some text here some text here some text here<button>Awesome button!</button></div>
The flexbox container is getting worse! because the link is also blockified1 and now we have 4 block elements. The text before the link, the link, the text after and the button. We can clearly see that this behavior is not intended at all.
Basically flexbox is useful when it comes to align element that we can consider as block element or container or boxes, etc but not when it comes to text container. text-align is more useful to align text inside the previous block/box/container element.
In other words, text-align should be used at text level to align text, images, etc and flexbox should be considered at an upper level to align block element and create layouts.
In your case, there is no big difference since we can consider button as boxes or inline-element. the only difference will be the whitespace between the button that you will face if you consider them as inline element when using text-align.
1 Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.
Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered
The display value of a flex item is blockified
A related article I wrote around the same subject: https://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p
https://www.w3.org/TR/css-flexbox-1/#flex-items
flex-box system provides more powerful features when it comes to aligning your content. If you have three buttons and you want them to be placed equally distant from each other, or equally distant from each other and container boundary you can give space-between or space-evenly value to justify-content property to the container. You cannot do that with text-align or float.
Yes, the reason is vertical centering. The align-items: center is the key here, which allows the buttons to be vertically centered in the modal footer. This is hard to do without flex-boxes - you would need to resort to "hacks" like using position:absolute, or adding some precalculated amounts of padding on both sides, etc. Flexes (and Grids) allow developers to define layouts more succinctly.
To answer your question - they didn't opt for justify-content:flex-end instead of text-align:right - instead, they opted for flex instead of block as the display box model (for vertical centering), and the justify-content usage comes naturally from that decision.
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 need to align image at the middle of the page. I used margin:auto to align middle horizontally.
How do I align the div block middle vertically. I have below conditions to follow.
I can not mentioned width and height of div or image.
I can not use margin-top in pixels.
Here is my jsfiddle.
You were doing it almost right. Here's your fixed fiddle http://jsfiddle.net/joplomacedo/cDD7m/4/
The thing is, you need an element with display: table wrapping one with display: table-cell for the table-cell to behave like it's supposed to.
Will background image technique fit your needs?
background: url(my-image.jpg) center center no-repeat;