This question already has answers here:
CSS calc not working in Safari and fallback
(2 answers)
Closed 6 years ago.
I center a div within another one by using calc() function. It works fine in Chrome, Firefox, Opera and even in IE but in Safari this method doesn't work.
Any suggestions without a javascript fixation?
left: -webkit-calc(50% - 25px);
left: -moz-calc(50% - 25px);
left: calc(50% - 25px);
As Hashem said, it doesn't work in earlier versions of safari.
http://caniuse.com/calc
However if you just want to center the div, a couple ideas come to mind.
One, you could give the container a
margin-right: auto;
margin-left: auto;
width: 50%;
Or make the width whatever you like.
Second, you could give the parent div
text-align:center;
Make the child div
display: inline-block;
and/or set a width for the child div.
Related
This question already has answers here:
Can I change the height of an image in CSS :before/:after pseudo-elements?
(14 answers)
Closed 3 years ago.
I have the following line in my stylesheet that calls my website logo.
.navbar__logo::before{
content: url("../images/logo/logo.svg");}
How can I scale this down? I'm learning a bit about viewPort & viewBox but cant seem to get it to work.
Thanks in advance.
After declaring a viewBox in your svg file, you should definitely give your pseudo-element explicit width and height:
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
}
Beyond that, if you wish to dynamically resize your pseudo-element and / or animate the scaling you can use transform: scale():
.navbar__logo::before {
content: url("../images/logo/logo.svg");
width: 200px;
height: 50px;
transform: scale(0.5);
}
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
'position: sticky' not working when 'height' is defined
(3 answers)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 3 years ago.
I'm wondering if anyone has any ideas why I'm having problems with position:sticky inside a float-based layout, but not outside of it.
You can see a fiddle at: https://jsfiddle.net/pjt0kmd7/1/
I'm using the following css for the sticky position:
.sticky {
min-width: 200px;
height: 300px;
background-color: red;
color: #fff;
position: sticky;
top: 1em;
z-index: 10000;
}
I've also tried removing overflow and heights on the first sticky's parents via:
overflow:none;
height:auto;
But that has not made any difference. Anyone know why the first red box isn't sticky like the second?
Edit Looks like I figured it out, the sticky parent needs a height defined? https://jsfiddle.net/pjt0kmd7/4/
I have my page up at http://www.playcademy.com/nolimits_mockup.php, and I am getting a bunch of whitespace below the slideshow in Chrome, though it isn't appearing in Firefox or IE.
When I inspect elements it seems that the headlineArea div is in the correct spot, but everything inside it is about 70px too low.
I'm sure I am missing something basic, but I have no idea what.
Thanks,
Doug
Your #slidearea div is too wide.
#slidearea {
display: inline-block;
text-align: center;
position: relative;
width: 915px; /*This was 920px. I narrowed it down to 915px.*/
height: 83px;
overflow: visible;
}
You need to apply a clearfix on headlineArea in order for it to display consistently because it only contains floating child elements.
See: What methods of ‘clearfix’ can I use?
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 9 years ago.
I'm trying to achieve centered vertical and horizontal alignment of a div.
This is the styling I'm using:
.box{
position:fixed;
display:block;
width:200px;
height:400px;
top:50%;
left: 50%;
width: 50%;
transform: translateX(-50%) translateY(-50%);
background:#ccc;
}
This style works perfectly in Firefox but not in Chrome. Here's the example: http://codepen.io/0leg/full/HJjrK
The interesting thing is that I lifted this styling from a modal window on this tutorial http://tympanus.net/Development/ModalWindowEffects/, and for some reason this works perfectly in webkit browsers...
That is simply because in even the latest version of Chrome, you will need to use the vendor prefix -webkit- for CSS3 transforms. Mozilla Firefox has been supporting unprefixed transform since v16 (current v25), and ironically so is the current version of IE. More information on browser support is available here: http://caniuse.com/transforms2d
Therefore, use the vendor prefix (just -webkit- is sufficient, unless you want to support older versions of IE and Firefox, then use their respective vendor prefixes, too):
.test {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
width: 200px;
height: 200px;
}
http://codepen.io/terrymun/pen/zCgkI
As you know the height and width of the div, I would change your CSS to this:
.box{
position:absolute;
width:50%;
height:400px;
top:50%;
left: 50%;
margin-top: -200px; /* Half the height of the div */
margin-left: -25%; /* Half the width of the div */
background:#ccc;
}
You're moving the div half way down and across the page, and then negatively margining it back by half of it's width.
http://jsfiddle.net/davidpauljunior/utPhs/2/
Note: You had two width declarations, I presumed you wanted the second one (50%), so removed the first one. I changed position fixed to absolute but it works with both, and I removed the display:block as <div> is already a block level element.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
when i use top:50% and left:50%
the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.
how can i resolve this ?
top and left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-top and margin-left to negative of one-half the height and width respectively, you'll get a centered box.
Example for a 300x200 box:
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
using translate will perfectly achieve that. simply apply this
div.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
source
Horizontal: Use a fixed width and
margin-left: auto;
margin-right: auto;
vertical: That's not that easy. You could use
display: table-cell
for the surrounding DIV and then give it a
vertical-align: middle
You can assign the box a fixed width and heigth, and then give it's margin-top and margin-left properties the negative half of the height and width.
EDIT: Example
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
One way is to assign a specific width to the box, then halve the remaining distance on each (left and right) side. This may be easier if you use percentages instead of pixel widths, e.g.,
<div style="margin-left:25%; margin-right:25%">...</div>
This leaves 50% width for the div box.
The very bizarre CSS "language" does not provide a simple way to center a element in the screen. Kludges must be made! This is the only solution I came to elements that are AUTO in both height and width. Tryed in FF19 (Win+Mac), CH25 (Win+Mac) and IE9.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
The above would centre your box centrally horizontally on the page with a 10px margin at the top and bottom (obviously that top/bottom margin can be altered to whatever you want). The 'text-align' on the body is required for IE, which as usual doesn't quite get the hang of it otherwise. You then need the left text-align on your box (unless you want text it in centred too) to counteract the text-align center on the body.
Trying to centre vertically is just about impossible using pure CSS though. Though there's a vertical-align in CSS, it doesn't work like the HTML vertical align in tables, so in CSS 2 there's no in-built vertical align like the HTML one. The problem is that you're dealing with an unknown height - even if you know the height of your box, the height of the page is unknown, or rather what are you trying to fix the box in the centre of? The page? The viewport? The visible screen area's going to be different for everyone, depending on their screen resolution, browser, and all of the browsers interpret the height differently.
There are various methods that claim to have solved the problem, but usually they don't reliably work in all browsers. I found this one the other day, which doesn't seem bad, but it doesn't work in Google Chrome (works in Firefox and Opera, but I didn't get chance to check out IE). There's an interesting discussion on the problem though on this thread on Webmaster World that summarises the various methods and pros and cons of them and is well worth a look.
Edit:
Dav's solution in the first response works okay as long as you (or the visitor to the site) don't increase the font size or line height. The container will be centred, but as soon as the font size is increased or more content added, it'll overflow the container.