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;
}
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
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/.
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.
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.)
If my layout is
BUTTON
TEXT
I'm trying to create room between BUTTON and TEXT. Trying something like
.bottom-gap {
padding-bottom: 150px
}
Only seems to increase the height of the button
Padding is applied to the inside of the element. To add a margin to the bottom of the element, you need to use margin-bottom: 150px. I'm assuming your button is an actual UI <button> element. If not, you need to make sure it's displayed as an inline-block.