I have a set of 28 links in a wrapper div element. Each one is a letter of the alphabet plus a # for numeric and one saying "all". Each are floated left. I want the text to be centered horizontally and vertically. With the code below I have it horizontally centered but the vertical-align: middle doesn't seem to be having any effect when I expected it to do so as you can use that on elements that have display: table-cell. Anyone have any ideas?
a {
float: left;
position: relative;
display: table-cell;
width: 30px;
height: 30px;
margin: 0 4px 4px 0;
#include border-radius(4px);
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #fff;
#include blue-gradient;
&:nth-of-type(14n) {
margin-right: 0;
}
&:hover {
top: -1px;
}
}
Kind regards,
Neil
You could use:
line-height: 30px;
I would use the line-height property to center vertically. I have found vertical-align rarely works, because it conflicts with other properties and browsers ignore it.
Related
I am having an issue with IE11 and utilizing the CSS calc() function along with display: inline-block and/or display: inline-table.
Currently I have a text input and a button that should be next to each other (inline), with the button always being a fixed width and the input should take up the available space leftover (i.e. calc(100% - 92px)). Both elements are display: inline-table;. In all other browsers, doing this calc() worked fine. In IE11, it drops the button to the next line.
Included in the JSBin are a couple styles at the bottom that make the elements appear inline, although this fix will not work for an end result. What I did was added display:inline-block to both the input & button and also removed padding and border from the input. At the end of the day, the input **must have padding & border` so this will not work for my use case.
^^ box-sizing: border-box fixed that "hack", but the issue as a whole still exists in IE11.
Here is the JSBin (in order to see the issue, you must be using IE11)
The CSS, as it stands now, looks like this...
body, dd, figure, form {
margin: 0;
}
form {
margin-top: 1.6875rem;
width: 100%;
margin-right: auto;
margin-left: auto;
}
form fieldset {
margin: 0;
padding: 0;
border:0;
}
input {
border: none;
border-radius: 0;
outline: 0;
margin: 0;
padding: 0;
text-align: left;
}
input {
font-size: 12px;
line-height: 15px;
display: inline-table;
padding: 4px 12px 5px;
border: 1px solid #000;
border-radius: 0;
background-color: #fff;
color: #999;
font-style: italic;
font-weight: 300;
vertical-align: top;
margin: 6px 0 14px;
margin-top: 0;
margin-bottom: 0;
width: calc(100% - 92px);
height: 40px;
}
button {
border: 0;
height: 40px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 13px;
display: inline-table;
position: relative;
padding: 0;
background-color: #000;
color: #fff;
width: 92px;
}
I'm assuming there is a bug with IE11 and calc() in which calc() doesn't take into account the border/padding when an element is display:inline-block or display:inline-table, although I could not find anything in my research to suggest this 100%.
Ultimately my question is, how do I get two elements to be "inline" with one being a fixed pixel value and the other a percentage width that is cross browser compliant.
EDIT: added box-sizing: border-box which made the display: inline and padding/border: 0 obsolete at the bottom of the JSBin. The issue still persists in IE11 though.
The answer to my question is as follows...
As Adam mentioned in the comments above, adding box-sizing: border-box; to, at the very least, the input & button elements fixed the issue where the border/padding was not being calculated in the calc() function.
In addition to that, changing display: inline-table to display: inline-block fixed the issue in IE11.
I'm trying to achieve a sliding-door effect on a span contained within an h2 element. The h2 element has position set to relative in order to enable z-index, so far so good.
The span is floated to the right within this h2 element and has a z-index set to lower than the h2's in order to slide under it when the view contracts, but keep sticking out under as if only the 'float' matters here.
But here's what I get instead, followed by what I wish to get:
Current result of z-indexed span within z-indexed h2:
Desired result
CSS for containing H2 element:
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
z-index: 5;
padding: 2px;
color: white;
text-align: left;
background: url('left-door.gif') top left no-repeat;
CSS for nested span element:
width: 200px;
height: 100%;
float: right;
z-index: 0;
text-align: center;
background: url('right-door.gif') top right no-repeat;
Anyone knows why the span refuses to sit level with the h2 even though the h2's fixed height ought to cap it within (setting clear: both on the h2 did nothing), and to be obscured by it when the view shrinks? It is because it's nested?
(Also, 'vertical-align' has no effect, the text doesn't settle on text-bottom but sits in vertical middle. Btw, just got started with this tinkering, but happen to be in a hurry. thanks.)
Edit: After BHouwens answer, i tried by reducing the text content of the H2 (real code has text), and the span aligns level, only problem is the z-index doesn't seem to work, but from what I remember from a previous question, z-index doesn't work on nested elements, as in they can't be stacked above or below their parent. Thanks for helping to troubleshoot! This has helped me focus better, and now think I'll just add two spans within the h2!
May be, below code will work for you!
h2 {
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
display: table-cell;
z-index: 5;
padding: 2px;
color: white;
background: #ff0;
}
span {
width: 200px;
height: 100%;
right: 0px;
top: 0px;
z-index: 0;
text-align: center;
background: #f00;
position: absolute;
}
span .wrap {
display: table-cell;
height: 24px;
width: inherit;
vertical-align: bottom;
text-align: center;
}
<h2>
H2
<span>
<div class="wrap">Span</div>
</span>
</h2>
Made a fiddle with your code only, which achieves your desired result: https://jsfiddle.net/dzpfkoLy/
My guess is you've got some other CSS acting on these elements (you can inspect with dev tools in Chrome or Firefox to see what this could be). Otherwise, if you want to ensure the result you need, you can set your span to
span {
// other span styling
position: absolute;
right: 0;
top: 0;
}
Which will shunt it to the top right of the h2. You can then play with z-index to get whatever kind of ordering you're after.
Here's what I'm trying to achieve:
Here's a fiddle showing the styling I have, (making use of display: table as I don't want to fix the width of each item and it should be responsive).
I'm close, here's the styling (SASS for brevity) and how it looks:
.nav--main {
ul {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
li {
display: table-cell;
border: 1px solid #333;
text-align: center;
line-height: 1.2;
vertical-align: top;
overflow: hidden;
}
}
a {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 200%;
padding: .5em;
background-color: rgba(105,158,197,1);
color: #fff;
text-decoration: none;
}
}
But I cannot get the a to take up the full height and remain vertically-centered in the middle. This fiddle shows one kinda hacky attempt, but only by setting vertical-align to top.
I don't want to:
set a fixed height
place the background-color on the li rather than the a: I hate when the clickable area doesn't take advantage of all available space
I don't know, in which case this might break, but a somewhat dirty trick could be this:
Updated CSS parts only
ul {
overflow: hidden;
}
a {
margin: -5em 0;
padding: 5.5em 0;
}
Demo
Try before buy
add this:
background: rgba(105,158,197,1);
into ul
That set the background color into the same as your link.
I have a bunch of divs inside a container that is equally spaced from the right as well as from the bottom. (i.e margin-right and margin-bottom are the same)
Here is my jsfiddle below:
http://jsfiddle.net/wYCzJ/1/
Here is my css code:
.container {
width: 100%;
height: auto;
display: inline-block;
}
.wrapper {
position: relative;
float: left;
width: 25%;
}
.box {
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 1px solid;
border-color:#DDD;
padding: 0.5em;
height: 150px;
}
.name{
width: 95%;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.result {
text-align: right;
margin-top: 0.5em;
font-weight: bold;
margin-right: 0.75em;
}
.result-type {
float:left;
display:inline;
font-size: 1.1em;
display: inline;
}
.result-value {
font-size: 1.5em;
display: inline;
}
.no_data {
font-size: 1.2em;
color: darkgray;
}
.date {
position: absolute;
bottom: 1em;
color: gray;
}
Everything works fine as expected, except that the last div box has extra some extra spacing towards the right ( Test 5 box and Test 7 box in this case)
I kinda need the same spacing all around. Is there a workaround for this?
if you add:
body {
margin: 0;
padding: 0;
}
you will have only 5px from the right
it's up to you to make div container to margin 5px from left and top
i managed to twick it:
body {
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-left: 0.5em;
}
tested it in Chrome and FF - http://jsfiddle.net/elen/wYCzJ/3/
found and adopted this version - jsfiddle.net/elen/5CJ5e/131 - see if it works for you
please notice combination of text-align: justify;, font-size: 0; and heights for both outer and inner boxes. also use of <span class="stretch"></span> for 100% width
Your probleme is simple, the body have a natural margin.
body{margin-right:0px}
That solve your probleme, but it's a bit wierd to have a bodywith only the margin-right at 0...
The overall container has spacing for its top, bottom, left, and right. Your individual boxes only have spacing on the bottom and right. The reason you are seeing "extra" spacing on the right is because the spacing for the individual box and the overall container are being added together.
A possible sollution with nth-child. This removes the margin of every 4th .box element.
.wrapper:nth-child(4n) .box{
margin-right: 0;
}
http://jsfiddle.net/wYCzJ/5/
Have a look at browser support of nth-child at caniuse.
On my webpage over at http://www.replyonline.co.uk/avaya/16312_UC_ms/costs/index.html you will see a twitter div named #twitter.
As you can see, it looks out of position and needs to be after the 4 #about divs to the left of it, but also needs to line up with the others. It looks pushed down currently.
I've fiddled with the CSS but haven't had any luck.
Here's the CSS for the about boxes and the twitter box:
#about{
width: 260px;
min-height: 140px;
float: left;
margin: 0 35px 10px 0;
background: url(../images/about_grad.jpg) bottom right;
display: block;
}
#twitter{
float: right;
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}
Thanks
I added a wrapper div (no styling) around the a linked items and removed the float:right attribute of the twitter box - that seemed to work.
Just remove float: right from #twitter.