I want to style a div exactly like a button. I noticed that when I give the button a specific height, the text is always centered vertically.
So far i tried digging through the Chromium user agent stylesheets but was not successful. -webkit-appereance: button also did not do the trick.
Here is a demo of the issue: https://codepen.io/franzskuffka/pen/QzqKQx. Note that the inline-block styling gives makes sure the text is aligned vertically - the bounding box is still weird.
Which property makes the text centered vertically without any additional wrappers? What is going on here?
TL;DR: It is not possible to recreate the layout created by a <button> element using CSS. Or at least it is hidden really well.
I tested this by changing the display value to flex on a <button> and it affected the vertical alignment. Other values like display:block did not have an effect. It seems that there is no css value for this, it just is the default behavior and there is no way to do it for a div.
Like you, I was looking for an answer to this question. I was trying to find css property which centers vertically content in button. When I almost gave up I decided to leaf through html specification and this is what I found:
If the element is an input element, or if it is a button element and
its computed value for 'display' is not 'inline-grid', 'grid',
'inline-flex', or 'flex', then the element's box has a child anonymous
button content box with the following behaviors:
The box is a block-level block container that establishes a new
block formatting context (i.e., 'display' is 'flow-root').
If the box does not overflow in the horizontal axis, then it is
centered horizontally.
If the box does not overflow in the vertical axis, then it is
centered vertically. Otherwise, there is no anonymous button content box.
https://html.spec.whatwg.org/multipage/rendering.html#button-layout
If your button doesn't have a fixed height, you can add padding to the div to center the text vertically. Add text-align: center; to center your text horizontally.
.btn {
background-color: #000;
color: #fff;
padding: 10px;
text-align: center;
}
<div class="btn">Hello!</div>
For a button with a fixed height, you may have to have a child element.
.parent {
background-color: #000;
color: #fff;
height: 100px;
text-align: center;
width: 100px;
}
.child {
top: 50%;
transform: translateY(-50%);
}
<div class="parent">
<div class="child">Hello!</div>
</div>
There are several other methods, but these are the ones I commonly resort to. CSS-Tricks has a complete guide on centering in CSS if you'd like to try out more methods: https://css-tricks.com/centering-css-complete-guide/.
Related
I have a form. Labels and inputs should always be center-aligned. For this purpose I use
display: flex;
align-items: center;
on the container element. However when error text appears under the input, the label is pushed downwards. Considering the flex behavior it is absolutely correct, but is there a way to fix the alignment between label and input so they are always center-aligned regardless of possible divs below input?
Here is the demo
Also, please take into consideration that the use of flex container is obligatory here.
align-items:baseline;
is also not an option, as there can be a textarea instead of input.
Not with your current markup.
One way you could achieve this would be to add a class onto the parent when there is an error message. Using this class, and a wrapper div around your input and error messages, you could absolutely position the errors beneath the input and add the relevant margin to the bottom of the container.
This way the error messages would be out of the flow and thus the alignment would be as you wanted.
.form-group.validation-error {
margin-bottom: 30px;
}
.input-wrap {
position: relative;
}
.error-message {
position: absolute;
top: 40px;
}
Demo
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.
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help
I have a three-column page. Each column is a div with the following styles:
.Row1 {
text-align:center;
display:inline-block;
vertical-align:top;
padding:0.5%;
width:31.5%;
}
The HTML is as follows:
<div class="Row1">
<h2>Header</h2>
<br />
<form>
Form stuff goes here
</form>
</div>
My form consists of nothing more than a text field, a few radio buttons, and a submit button. Problem is, putting the form into the above code will give me a centered form, with the text field, radio buttons, and submit button also aligned in the center.
What I am trying to do is to just center the form itself (as a container), but keep everything aligned to the left.
I have tried wrapping the form in a div that is text-aligned centrally, and the form style set to left align, but that didnt work. The auto margin thing didn't work, either, whether it was on the wrapping div, or on the form, without the wrapping div (that is, an extra div. the Row1 div always remains).
EDIT: http://jsfiddle.net/pJwqe/
text-align is not a property to 'align' divs or forms; instead, as it says, it aligns text.
If you want to center a block-level element, you'll have to use margin. The default way to center a single element with margin is to set it , for example for a top-level container, to margin: 0px auto 0px;.
If you want a lay-out with 3 columns, I'd rather think you'd want something like this.
You can style the margins of your divs by setting margin-left or margin-right, then style the first/last element with advanced selectors (so you don't have a margin-left for your first element, or a margin-right for your last).
As you can see, the forms are now centered, but their content is not. (You need to give your forms a width, else they will fill the containing block by default if they have content).
NB: It might be relevant in the rest of your code, but in this test-case vertical-align does nothing.
Hope this fiddle link will work for you. I have done the following changes in your css
.midAlign form {
border: 1px solid #C2C3C0;
margin: 0 auto;
padding: 10px;
width: 155px;
}
There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.
I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.
I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.
http://jsfiddle.net/wjFbD/2/
I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:
http://jsfiddle.net/SkczB/2/
This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:
The two buttons are wrapped in divs with class buttonWrapper.
Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.
This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.
If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.
Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.
Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...
http://jsfiddle.net/wjFbD/7/
HTML
<div class="btnWrapper">
<div class="buttonWrapperB">
<button class="left">
button Left
</button>
</div>
<div class="buttonWrapperA">
<button class="right">
button Right
</button>
</div>
</div>
CSS
.btnWrapper
{
width: 100%;
background-color: #FEE;
border: 2px solid black;
margin-bottom: 10px;
height: 50px;
}
.buttonWrapperB{
float: left;
width: 20%;
}
.buttonWrapperB button{
width: 100%;
height: 50px;
}
.buttonWrapperA{
float:left;
width: 80%;
}
.buttonWrapperA button{
width: 100%;
height: 50px;
}
I adjusted the background opacity of your .right elements to see what was going on below them. It looks like the .left elements are not only taking up the remaining space-- they're also taking up the entire row. Weirdly, the text inside these elements is centered as if it were only taking up the remaining space.
If you want the same to work for the buttons, it seems like the only solution involves a little hack. Buttons are quite complex indeed.
button.left {
margin: 0;
position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
z-index: -1; /*hides the "overflowing" part below the right button*/
width: 100%; /*make the button stretch to the full width of the row*/
padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
padding-left: 0;
display: block;
}
See updated fiddle: http://jsfiddle.net/wjFbD/6/
starting with
One element has fixed width, and the other element should take up
whatever width remains.
here is my general solution:
<div class="container">
<div class="two">125 €</div>
<div class="one">my favorite provider</div>
</div>
(stylus syntax, in your mind just add {,},;)
.one // red
border none
height auto
overflow hidden
white-space nowrap
text-overflow ellipsis
.two // green
float left
white-space nowrap
text-overflow ellipsis
You can set the one green thing to a fixed width, but indeed, you do not even have to! Things full up nicely. And String get's truncated with an ellipsis, if it gets too long.
Things get a bit more complicated, when one of them is a <button> rather than a <div> (and I can't figure out, which style property differenciates them, so I would need to style away), but anyway, with a wrapper, that also works:
→ See full codepen here. (Feedback appreciated.)