http://pastebin.com/index/9M2rA8cx that has all my code.
You will notice that the two div's are centered in large.css. However, the text is being re-centered after each '.' is applied. If I put the span id="wait" outside the centered div, it will show up in the upper left corner. I don't need exact centering, but I can't use a absolute position for centering because the text changes.
Is there any way to append the "..." to the already centered text without it re-centering?
thanks!
Can't you just apply a fixed width style to the wait span, such as:
span.wait{
display: inline-block;
width: 20px;
}
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
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'm trying to make the box divs be clickable, but the code I'm using is
display:flex;
align-items: center;
justify-content: center;
to center the text horizontally because when I use display:block, the text won't center horizontally if it's long.
I have a demo here http://jsfiddle.net/UHECE/32/
When you try to click the right div, you have to point the mouse over the text. I want the whole right div to be clickable (link like the text) regardless of the length of the text. As for the left div, you can hover anywhere on the div and it will be clickable because the text is long. I think it depends on the width of text, because when I tried to use Firebug and hover over the text on the right div, the height is 100%, but the width depends on the length of text. Does anyone know how to make the divs a clickable link?
As much as possible I'd like to stick with a CSS code please :)
The link tag in the right box is not filling the entire width. That's why you need to click the text (or above or below the text).
By adding display:block; and width:100%; to the link element, it's now filling the entire right box.
Updated fiddle:
http://jsfiddle.net/UHECE/33/
you should add this to your css file:
#rightq{
margin-top:50%;
margin-right:20%;
height:100%;
width:100%;
}
you wanted to select an ID with a . but thats not possible :).
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
The html:
<td>
<img>
text here
</td>
The css:
td img{
display: block;
float: left;
}
I want the picture to be floated to the left within the cell, and the text to be vertically-aligned to the middle. Without the picture there, the text is automatically vertically aligned to the middle, but with the picture there I can't seem to change the vertical alignment of the text.
Any ideas?
If you know the height of the image itself you can use the line-height property.
<td style="line-height: 50px;">
<img>Text text text
</td>
This should force the text to be displayed in the center of the line-height.
Try setting vertical-align:middle; in the CSS for the img. You may also want to consider setting that image as a background to that table cell, as you may have cross-browser issues regardless of how you position everything (setting the image as a background would avoid this).
Using line-height to vertically align text next to an image within a table cell onl*y works if you have one line of text. The next line of text will be (as in the example above) 50px below the first line of text.*
Setting the *image as backgroun*d also does not work unless you set a margin within the cell = to the width of the image on whichever side you want the image to align.