Why would text and controls inside the table cells ignore/not inherit vertical-align:middle; style of the cell itself (or row, or both)?
In CSS stylesheet loaded by the page:
tr.troptions{
vertical-align:middle;
}
td.tdoptions{
white-space:nowrap;
vertical-align:middle;
}
The inspector is showing that style is applied:
but everything inside the row does not appear aligned vertically at the middle in IE10 that this is being developed for:
The CheckBoxes probably are centered vertically, but not text and not the TextBoxes. The left text box is lower than the the right.
The controls seem to be vertically aligned fine in Firefox though, but still not text:
Tried putting the style into td, tr and table to no avail. What am I doing wrong?
Edit:
I challenge everyone who downvoted this "bad" question to produce a CSS that vertically middle-aligns text, check boxes, radio buttons, text boxes and buttons in the table cells for IE10. And if you cannot - you know what you are: all-hat-no-cattle.
I don't exactly know why this happens, but in general, you can use
.troptions {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
For Text, you can also use line-height: 00px where 00 is the same as height.
Related
I have a little question about a wordpress plugin which is related to css.
I use on my blog the related posts plugin from Jetpack. It displays 3 articles with wide image and title at the bottom of my posts.
I would like to make the text center horizontally and vertically over my image. As you can see on this post (https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/) I managed to get it by playing around with css.
But I'm not happy with this solution as it will not work if the content is too small and the text is not really vertically aligned (just a padding from top).
Thanks in advance.
https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/
You'll need to remove some of what you've added, but here you go:
#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
position: relative;
}
#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 90%;
width: calc( 100% - 30px );
}
Remove these items from your current CSS and replace them with the values above: https://i.imgur.com/kEf3ev4.png
The end result will look like this: https://i.imgur.com/qzGI3sK.png
Edit: I changed the width from 100% because it could lead to the words touching the edge of the image, so I set to 90% for browsers that don't support calc, and added 15px of "safe space" for browsers that do.
After practicing some of the CSS i have been learning i have encountered a problem and despite trying numerous things i cant seem to get what i want. I transformed the text to fit in the grey divs vertically, but i cant seem to get it so the words are all displayed on one line. How do i acheive this? I think once i get that it should be easy to position them centrally.
http://jsfiddle.net/#&togetherjs=DGHlFmn0Hg
You should center the text first using transform and absolute positioning. Then just apply the rotate transform (around the center point by default):
#headline .buttons {
height:100%;
width:50px;
background:#a5a5a5;
float:right;
margin-right:3px;
color:#fff;
/* add this */
position:relative;
}
#headline .buttons p {
margin:0;
text-align:center;
position:absolute;
width:260px;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(-90deg);
}
Jsfiddle demo.
Note that the width of the <p> element will just fill the width of the containing button which is just small (hence the text wrapping). So you have to set the width explicitly as large as possible (it does not really matter) so that the text will span on a single line.
Good approach to vertical text that is placed in one line and takes as much vertical space as needed is described in this article: http://kizu.ru/en/fun/rotated-text/
The 1st example there seems to be exactly your case (compact table headers).
I'm making a website that uses Bootstrap 3 and I need a row with 3 columns of thumbnails with their captions to the right. Like this:
So my questions are:
How do I get the captions to the right?
How do I vertically center the text to the thumbnail?
If possible I'd like to have the gray wrapper you see on the image.
If you don't plan to support IE8 or less you can use the following rule:
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This should be applied to the child you want to vertical center inside its parent.
source
I have a table with slanted text in the header row, the only problem is that the text still makes the width of the columns way to large. Is there any way to squish together the table columns so that they are about the width of the select boxes? Or is there a way to place the text there without it in the header and maybe just use a <div> or <p>?
Here is the fiddle I am working with:
http://jsfiddle.net/t9Krg/1/
.slanted {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
white-space:nowrap;
/*
display:noblock;
*/
}
The boarders around the header is just to see the extra spacing and will be removed later.
If you use absolute positioning, you can place objects on the page anywhere you like. But to keep them positioned correctly relative to the table, you need to apply relative positioning to their parent elements.
So for this markup:
<th class="slanted">
<div>This is a heading</div>
</th>
Your CSS should look something like this:
.slanted {
text-align:left;
position:relative;
white-space:nowrap;
}
.slanted div {
width:12em;
position:absolute;
top:4em;
left:-1em;
transform: rotate(-45deg);
}
You'll have to tweak the top and left values to get things right, but it shouldn't be too difficult as long as you aren't intending to have line breaks in your labels.
Link to JSFiddle
Maybe you could try using text-overflow over the th tags. An example i've found in this answer:
CSS text-overflow in a table cell?
Add position fixed to CSS
div{position:fixed;}
You'll have to play around with some of the other stuff, but it would cause the columns to not grow to your content.
http://jsfiddle.net/MathiasaurusRex/t9Krg/4/
I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.