I'm trying to vertically align a number in a div.
Here's the code :
<div class="nb">2</div>
display: inline-block;
height: 56px;
width: 56px;
background: transparent url("../img/stepnb.png") center center no-repeat;
line-height: 56px;
color: #255066;
text-shadow: 1px 1px 3px rgba(255,255,255,.75), -1px -1px 2px rgba(0,0,0,0.75);
font-size: 42px;
font-weight: bold;
margin-top: -25px;
note : the result is the same on IE9 to 11
As you can see, it's not vertically centered on different browsers.
Do you have an idea how I could achieve to align it on all major browsers without conditionnal comments or css hacks?
edit: the issue could come from the use of a css reset, I'll check that.
edit 2 : The alignment issue came from the "Myriad pro" font, which was assigned to a parent div.
The alignment issue came from the "Myriad pro" font, which was assigned to a parent div.
Thank you all for the help :)
Related
I tried this: https://jsbin.com/qidesiqada/edit?html,output
also pasted here:
<html>
<head>
<style>
p.two {
float: right;
color: white;
font-family: Century Gothic, sans-serif;
font-size:20px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.one {
float: left;
font-family: Century Gothic, sans-serif;
color: white;
font-size:27px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.three {
text-align: center;
margin-top: 12px;
font-family: Century Gothic, sans-serif;
color: white;
font-size:20px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#container {
width:45px;
}
p { margin: 0; }
</style>
</head>
<body>
<div id="container">
<p class="one">1</p><p class="two">20</p><br>
<p class="three">3</p></div>
</body>
</html>
however, when 1 element is large than the other, it shoves the other ones out of the way. Note how the big 1 shoves the little 3 slightly to the right. This is what I want to avoid
I want each element to be exactly in the same place no matter the size of the font or the size of the others. So it would seem that position-absolute would do this, right? But no, When I use position-absolute on that bottom element, it doesn't center in the div. When I use tricks like transform: translate(-50%, -50%); it move it half way across the screen as though its ignoring the fact that it exists inside of the container div.
Any help on this? Thanks!
this is where the numbers are supposed to fit. You'll notice that even here they are slightly off, but you can get the general idea. The "pie chart" on the back is not part of the desired affect. I simply wish to show that each number should be positioned in one of the quadrants.
There's a few things going on in your question so I'll answer what I think will be the most help to you (also not entirely sure what you're doing).
The reason #3 is centering to the body instead of the div is because absolute position is relative to the first dom it finds up the tree with absolute or relative positioning. Since the parent dom element has the default static positioning it is positioned relative to the body.
css-
#container { position: relative; }
jsbin-
https://jsbin.com/hamepicage/1/edit?html,output
Edit:
Closer what what you're trying to achieve. Use absolute position on all elements so their bounding boxes don't collide. Instead of float: left; use:
left: 0;
Instead of float: right; use:
right: 0;
And for the centering you can calculate the center if you know the width.
calc(50% - 12px);
Or make it width: 100%; and center align the text.
text-align: center;
width: 100%;
Also, don't forget to give your container div a height.
https://jsbin.com/tovopiseqe/1/edit?html,output
The button has these basic styles to make it look sort of 3D with a flat look.
background-color: #7a7acc;
border: none;
border-radius: 10px;
box-shadow: 0px 4px 0px #4747b2;
color: #fff;
font-family: Lato;
font-size: 16pt;
font-weight: bold;
height: 36px;
How can I make it appear pushed down like it appears now with the box-shadow, except above? I considered using -4px instead of 4px, but that doesn't move the button down 4 pixels. How can I do this properly? I also have to move the text down 4 pixels.
if you want to button to appear pushed down when its pushed down
add and active psuedo class and then position relative and then add a top:#px to it
.btn:active{
position:relative;
top:4px;
}
here is a demo http://jsfiddle.net/p5w4x/
If the idea is to center either button vertically, this should do the trick:
vertical-align: middle;
I'm working on my site and i want there to be an horizontal line by the right side of the page headers. Currently this is the code for my header, stripped css.
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}
Alongside:
<div id="newhead"><?php the_title(); ?></div>
But for some reason i cant get the lines to show by the side of the header text.
Please help. http://jsbin.com/ILOlivI/1/edit
I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:
<div id="newHead"><div>the header text</div></span>
#newHead {
background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
}
#newHead div {
background-color: white;
display: inline-block;
padding-right: 10px;
}
Here's a jsfiddle example: http://jsfiddle.net/mVqY6/
This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.
If you are trying to put in a horizontal line level with the mid-line of the text, border-bottom is not really going to work is it?
Off the top of my head I would be using a single pixel .gif image stretched to 100% of the remaining space and aligned to the middle of the text... or if you want pixel perfect alignment to a specific text size, use a 1px wide .gif that has your line in it, plus x number of transparent pixels below.
You could introduce an SVG line, or float a DIV beside your text that is half height, with a border top or bottom. The DIV solution would probably make the most sense if you want to stay in pure CSS/HTML.
<div style="float:right;">
Upgrade now
Buy more credits
</div>
The float:right|left (whether inline, or in my stylesheet) seems to make the links lose both their vertical padding and their bottom border. If I remove it, I have no problem.
Here's the CSS for the links:
.button2 {
color: #fff;
font-size: 18px;
text-shadow: 0 -1px 0 #064687;
border: 0;
border-bottom: 2px #0B5BAC solid;
border-radius: 8px;
background: #1E88F2;
background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
padding: 9px;
cursor: pointer;
box-shadow: 0 2px 2px #999;
text-decoration: none;
width: 270px;
}
Try the old 'hasLayout' fix by adding zoom: 1;
.button2 {
zoom: 1;
}
http://www.satzansatz.de/cssd/onhavinglayout.html
I don't like doing hacks like that but it seems to achieve what you want.
That is because you are trying to assign styles to an inline element in which they typically don't apply. Such as vertical padding, widths, and borders. Try giving it display:inline-block or display:block; float:left;, and in the case of IE7 if you use display:inline-block, look for the display:inline-block fix for IE 7 and you should be all set. jsFiddle: http://fiddle.jshell.net/wUD9q/5/show/light/
FYI - Float has nothing to do with it at all. Removing the float on the outer div doesn't fix it either. jsFiddle for it still broken: http://fiddle.jshell.net/wUD9q/1/show/light/
IE7 is used by less than 1% of the world browsing the internet. Just move on!
SOURCE: http://theie7countdown.com/
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}