With this:
<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" value="push me" />
</div>
The button is aligned to the center of the browser window (as desired) in FF, Chrome, IE7 and IE8.
But, add "display:block" to the button:
<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" style="display:block;" value="push me" />
</div>
The button is aligned to the center in IE7 - and is not aligned to the center in FF, Chrome and IE8.
Why? And can a button (or any <input>) with display:block be center-aligned in some way? (other than using <center> - which works on all browsers mentioned, btw - but is "forbidden"...)
This way it can work:
<input type="button" style="width:100px;margin:0 auto;display:block;" value="push me" />
To force a block input (originally display:inline element) to be centered, you have to set a fixed width and then the margin to 0 auto ;)
from the css standard:
This property describes how inline contents of a block are horizontally aligned
so when your elements (no matter what they are, divs, spans, inputs, etc.) are inline, text-align has an affect on them, and when theyre display:block, by standard definition, text-align will not align them
you can fix this by setting margin:0 auto and fixing a width, like steweb suggested, or alternatively (depending on your specific requirements):
<input type="button" style="display:inline-block;" value="push me" />
Elements that are displayed as blocks are centred with auto margins. The text-align property should only centre inline children. Internet Explorer has bugs surrounding this.
Related
I'm trying to lay out some elements in a line such that they all have the same top and bottom vertically.
If I create a button and text input with the same specified size, the button actually has a slight margin at the top and bottom which make it appear smaller than the text input. When I inspect the element in Chrome developer tools, it doesn't show this extra space as part of the actual element!
<button style="height:160px">
test
</button>
<input style="height:160px" />
Fiddle
Why is this happening and how do I get rid of the extra space around the button?
Now if I remove the text from the button, suddenly the second element get pushed way down! I see the same thing if I put a space (e.g. ) in the input.
<button style="height:160px">
</button>
<input style="height:160px" />
Fiddle
Again, what's going on here and how do I fix it?
The box model and box-sizing property are the reason for the slight size difference on your first example. It's the way browser's calculate the width and height based on margins, padding, etc.
Set the box-sizing property to border-box and they line up just fine
input {
box-sizing: border-box;
}
<button style="height:160px">
test
</button>
<input style="height:160px" />
As for your second example, it's the vertical align property that comes into play. It affects inline elements and the default is baseline. Set it to something like top or middle and they align as you would expect. Throw in the same box-sizing as the previous example and they become the same height:
input {
vertical-align: top;
box-sizing: border-box;
}
<button style="height:160px">
</button>
<input style="height:160px" />
First Question:
There isn't any extra space around the button, but there is extra space inside the input tag, in the form of padding, which causes its effective height to exceed 160px.
If you want the total height of the input to be 160px, including padding, set box-sizing: border-box on the input (arguably, this should be the default behavior).
Second Question:
To align the button without any text inside it, set vertical-align: bottom; (or top, or middle) on the button.
For explanation: the default vertical-align value of baseline will try to align the baseline of text inside the element with the text in the parent element, but if there isn't any text inside the element, will instead try to align the bottom margin edge, which means that the bottom of the button ends up around the middle of the input.
Code with Both Fixes:
<button style="height:160px; vertical-align: bottom;">
</button>
<input style="height:160px; box-sizing: border-box;"/>
The other answers explain box-sizing, and how to align the elements with vertical-align.
Another approach to the alignment is to wrap the elements in a flex container. You can also set the height on the container instead of both the elements.
Example:
div * {
box-sizing: border-box;
}
div {
display: flex;
height: 160px;
}
<div>
<button></button>
<input>
</div>
<br>
<div>
<button>Content</button>
<input>
</div>
I have several buttons contained within divs that I would like to place on the same line. Two of the buttons are only displayed if a certain value is greater than 0. I added display:inline-block in a div container thinking that would place all of the enclosed divs on the same line but it didn't. I also need the buttons to float right (hence the style="float:right in the container div. I've also tried placing display=inline on each of the buttons which didn't work. Here is my HTML:
<div style="display:inline-block" style="float: right;">
<div *ngIf="menu.itemNumber > 0">
<button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
<button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
</div>
<button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button>
</div>
Why aren't the buttons showing up on the same line?
Its because you have a div inside which is block by default. Apply display:inline-block to all elements inside parent button div
Stack Snippet
.main>* {
display: inline-block;
}
<div class="main">
<div>
<button></button>
<button></button>
</div>
<button></button>
</div>
Your inner div (<div *ngIf="menu.itemNumber > 0">) is still a block level element. You need to give it display: inline-block, for it to be inline with the following button.
Also, do not duplicate the style property on your wrapper div. Combine the styles in one string: style="display:inline-block; float: right;" (this is assuming you still want the outer div to be inline-block - it may not need to be).
I also learned that sometimes, depending on the size of the content inside your buttons, or sibling elements, they might not be in the same baseline, meaning some will be higher than others, even if they are side by side. The way to fix baseline issues is to use a special kind of overflow (Like hidden or auto) on the sibling elements
EXAMPLE:
div sibling-elements{
overflow: hidden;
}
In Flex there is a container component called HGroup that lays out it's contents horizontally. What would the equivalent to the following be in HTML:
<HGroup gap="10">
<button width="50"/>
<button width="10"/>
<button width="100"/>
</HGroup>
The features of the HGroup, for HTML developers, are that each item in the HGroup tag is positioned after the previous item. In the code above each button would be placed after the last. The gap property specifies how much space is between each item. The hgroup fits the width of all it's elements and does not wrap around to the next line. There is a verticalAlign property that aligns the elements top, middle or bottom.
I think a div or span tag with some sort of no wrap style the closest tag that mimics the HGroup behavior?
On the elements that you want to be inline you set the display style to inline. Example,
<div name="HGroup531" style="position:absolute;left:138px;top:107px;width:180px;height:23px;">
<input type="button" name="Button605" style="display:inline;padding-right:2px;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
<input type="button" name="Button635" style="display:inline;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
</div>
At least this is how you do it to the best of my knowledge.
I have a few div boxes that are using position:fixed and I use a margin-top and margin-left in order to put them where I want them to be.
Everything works very well with FF/Chrome, but IE7 seems to fail at displaying these boxes at all.
I've googled it and I understand that only IE7 bet2+ knows how to display position:fixed items properly.
I'm looking for a solution that will allow these boxes to be displayed correctly on all IE7 browsers. Can anyone assist?
CODE: (The two divs in question are the ones with the inline styling)
<div id="rn_PageContent" class="rn_Home">
<rn:widget path="search/ProductCategoryList" data_type="categories" label_title="#rn:msg:FEATURED_SUPPORT_CATEGORIES_LBL#"/>
<div style="float:right;width:310px;background-color:#000;border-style:solid;border-width:1px;border-color:#999999;padding:5px;position:fixed;">
<h2 style="border-bottom:1px solid #BBBBBB;margin-bottom:10px;padding-bottom:2px;">Most popular questions</h2>
<rn:widget path="reports/Multiline2home" report_id="#rn:php:$report_id#" per_page="5" />
<rn:widget path="reports/Paginator" report_id="#rn:php:$report_id#"/>
</div>
<div style="float:right;width:310px;background-color:#000;border-color:#666;border-style:solid;border-width:1px;padding:5px;margin-top:10px;position:fixed;">
<rn:widget path="standard/knowledgebase/PreviousAnswers2" number="3" />
</div>
</div>
Thanks,
position: fixed elements are positioned with the properties left and top (or right and bottom) not with margin.
I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.
How can I force the div to expand so that both buttons are on one line?
Try white-space: nowrap;
Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.
I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and they stayed inline despite the combined width of the children exceeding the parent.
Didn't need to toy with max-width, max-height, white-space, or anything else.
Hope that helps someone.
If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-width CSS property.
You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.
Here is an example:
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
You may want to consider overflow property for the chunk of the content outside of the parentDiv border.
Good luck!