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.
Related
My prime objective was to create webpage with a heading with a border, and text underneath it which is as wide as the border of the heading (so if the heading with the border is 500px, then the text underneath should be directly underneath it, ie have a width of 500px).
I have used text-align: center; in the body tag already, so as to align the heading of the webpage to the center. I assumed everything written in the body tag would be centered automatically since they are all nested in body.
Inside the body, for the actual text written in the page, I've used a <div class="content"> container. I know that it has been applied satisfactorily to the actual text because all other formatting applies onto it as expected.
However, when I write width: 500px; inside the .content{}, the text suddenly goes into a left alignment. I tried to use text-align: center; in the .content{} class too, but even that didn't align the text in the center.
What am I missing here? Why isn't the actual text being displayed in the center, directly underneath the heading?
Thanks in advance!
For div tag when you set a width you also need to say that the div is no more block but inline-block elsewhere it becomes a block with the specified width. So one of these solutions works:
.content{
width:500px;
display:inline-block;
}
or
.content{
width:500px;
margin:auto;
}
You have given the div a specific width in pixels. To make sure it is centred within your page you should apply a margin:0 auto css rule to it so that it will automatically calculate the side margins to center the element.
Be aware that the margin:0 auto technique does not always work. Here are the rules for it to work:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position
The element must not have auto as width value
To replicate bug:
Resize your browser width so that you can see the "ALDO" logo
Uncomment this 1 line of code
.logobox {
/* display:flex; */
}
"ALDO" logo becomes vertically centered.
Why are the logo's being vertically centered when I add a display of flex? Shouldn't this only happen if I add a justify center or align center? What is causing this bug?
The "Aldo" logo is an image file. Generally speaking, whether it's an img or svg element, images are set to display: inline by default.
Inline level elements are set, also by default, to vertical-align: baseline. This setting raises the image slightly from the baseline (the line upon which text rests). This extra space is created to accommodate "descenders", which apply to text, not to images, but display: inline doesn't make that distinction.
When you switch from display: inline to display: flex, the images are automatically set to display: flex, which renders them as block-level elements. Such elements are not set to vertical-align: baseline.
In your code, this results in the images shifting downward into the descender space.
More details here:
Mystery white space underneath image tag
Why is my textarea higher up than its neighbor?
Span element with display: inline-flex has greater height than sibling span
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on jsFiddle.
button {
display: block;
position: relative;
background-color: pink;
width: 100%;
min-height: 200px;
}
<button>
<div>why?</div>
<div>are these centered vertically?</div>
<div>And how to remove it?</div>
</button>
Why the contents are vertically centered?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
10.8 Line height calculations: 'vertical-align' property
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
EXAMPLE HERE
button { width: 100%; height: 200px; }
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
EXAMPLE HERE.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
Bootstrap adds padding above and below the button content (6 pixels). You can alter the padding amount with: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} where x and y are whatever value you choose.
If you want to alter that button only give the button id="table" or something like that and then do: button#table{padding:0px;}
If you can avoid using vertical align you should as not all browsers support it.
Say I have 3 divs side by side:
<body>
<div id="ok1">Content for id "ok1" Goes Here</div>
<div id="ok2">Content for id "ok2" Goes Here</div>
<div id="ok3">Content for id "ok3" Goes Here</div>
</body>
Then I apply a margin to one of them:
#ok1 {
display: inline-block;
margin-top: 20px;
}
#ok2 {
display: inline-block;
}
#ok3 {
display: inline-block;
}
Why is it that all three get a top margin?
This is because the two divs are inline with the first one. When you did display: inline-block; it moved the other two divs into a block with the first one.
If you take that out, it goes back to normal.
fiddle
thanks to #MosheKatz for the idea on inline-block
An inline formatting context is established between the elements, therefore the following applies:
9.4.2 Inline formatting contexts (w3.org)
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
The default vertical-align value for inline elements is baseline.
You could change this value to something like top, thus changing the results (example)
div { vertical-align:top; }
I have two divs side by side. Both have the same size and display: inline-block. The only difference between the two is, the first one has some text and the second one is blank.
HTML:
<div>1</div>
<div></div>
CSS:
div {
display: inline-block;
border: 1px solid black;
width: 50px;
height: 50px;
}
The first div is lower than the second one.
I am aware of all the possible fixes, like adding some text or a to the second div. Adding vertical-align: top fixes this as well, of course.
What I want to know is, can someone explain, why a blank div has a different alignment than a div with some text in it?
JSFiddle
Inline-block boxes are, by default vertically aligned such that the baseline of the inline-block box aligns to the baseline of the line box in which it is rendered.
The baseline of an inline-block box with one line of text, is the baseline of that line. More generally, the baseline of an inline-block is the baseline of the last line of text that it contains. But that means that there is no baseline for an inline-block that contains no text.
In such a situation a fall back rule kicks in, and the bottom of the inline-block box is placed on the baseline of its line box.