I'm using parent containers to vertically center a div.
http://danacoleproducer.com
It works in Safari and Chrome but not Firefox. I looked at this post: CSS vertical-align: middle not working but I'd rather not use tables.
My CSS:
.wrapper {
height: 100%;
max-width: 420px;
}
.wrapper:before,
.container {
display: inline-block;
vertical-align: middle;
}
.wrapper:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
margin-left: -0.25em;
}
.container {
text-align: justify;
font-size: 12px;
}
The following might do the trick ;-)
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Where .container is what you want to center vertically.
Related
I am extremely new to CSS and am trying to edit the CSS on my WordPress theme. I am trying to change the date text on each blog post to a centered diamond. Right now, I am having trouble getting the diamond centered on the post.
Forgive the extremely messy CSS. I know it's botched.
.post_detail post_date {
width: 100%;
float: left;
margin-bottom: 20px;
text-align: center;
}
.post_info_date {
background: #fff;
height: 60px;
text-align: center;
transform:rotate(45deg);
width: 60px;
position: inherited;
bottom: 20%;
}
.post_info_date span {
color: #333;
display: table-cell;
height: 60px;
transform: rotate(-45deg);
vertical-align: middle;
width: 100%;
}
Make USe of line-height property.
CSS
.post_info_date span {
color: #333;
display: block;
transform: rotate(-45deg);
vertical-align: middle;
width: 100%;
line-height:60px;
}
Style Accordingly.
Hope this Helps..
I'm centering a div inside another div using percentage margins. I do this because the parent div is going to change sizes based on browser size.
See this jsfiddle for a demo.
My CSS:
#test-wrap {
position: absolute;
width: 400px;
height: 250px;
background-color: pink;
}
.white-wrap {
position: absolute;
width: 50%;
height: 50%;
background-color: white;
left: 50%; margin-left: -25%;
top: 50%; margin-top: -25%;
}
This works fine in Safari, but in Chrome the child div is appearing higher than it should.
Perhaps there's a better way to achieve such a thing, that works on all browsers and doesn't rely on pixel margins? Any suggestions would be greatly appreciated!
You should use the attribute margin. So your CSS of white-wrap should be:
.white-wrap {
position: relative;
margin: 0 auto;
width: 50%;
height: 50%;
background-color: white;
}
This is my favorite way to accomplish this (works in all modern browsers and IE8+).
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
And here is a jsFiddle that mimics your example.
Try
#test-wrap {
display: table-cell;
width: 500px;
height: 500px;
background: gray;
vertical-align: middle;
text-align: center;
}
.white-wrap {
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
You should set those properties too :
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
Once you defined a size for a DIV or anything else, the margin, padding and everything will be in the sizing and won't increase the size.
I'm trying to vertically center an image in a DIV that doesn't have a fixed/specified height. I've tried building on the Centering in the unknown article on CSS Tricks but for that to work you need to specify the height. Rather deceiving article title.
Here's my JS Fiddle: http://jsfiddle.net/6J2WA/
This is what I'd like (picture): http://cl.ly/image/1k0h262c2c3s
CSS
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
}
.inner {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
background: #ef4;
}
.c-3 {
width: 29.3%;
float: left;
margin-left: 6%;
background: #e4f;
}
#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; margin: 0; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; }
The reason you can't use the pseudo element technique is because you don't have enough ancestor elements that are 100% of the height of the #you-and-us element.
You can simplify the whole thing if you throw out floats and use display: table-cell for your .c-3 elements.
http://jsfiddle.net/6J2WA/5/
/* This parent can be any width and height */
.block {
text-align: center;
}
.inner {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
background: #ef4;
}
.c-3 {
display: table-cell;
background: #e4f;
}
#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; background: yellow; vertical-align: middle; }
I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
html, body{
font-family: helvetica, sans-serif;
font-size: 1em;
height: 100%;
overflow: hidden;
}
#middle{
/* display: table;*/
display: table;
height: 80%;
width: 90%;
/* position: fixed;*/
position: absolute;
top: 10%;
left: 5%;
right: 95%;
bottom: 90%;
color: #000;
z-index: 0;
}
#middleinner{
padding: 0.5em 1em 0.5em 1em;
background-color: #F9F9F9;
display: table-cell;
/* display: inline-block;*/
border-radius: 1.5em;
vertical-align: middle;
/* margin-left: auto;
margin-right: auto;*/
text-align: center;
/* position: relative;*/
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 20;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?
Yes, a combination of line-height, inline-block, and vertical-align can do it.
#middle {
width: 80%;
margin: 10px auto;
border: 1px dashed black;
height: 500px;
line-height: 500px;
vertical-align: middle;
text-align: center;
}
#inner {
height: 50px;
width: 80%;
overflow: auto;
display: inline-block;
line-height: 1.1em;
}
Demo
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})
I'm trying to vertically center an image using vertical-align: middle; but I can't seem to get vertical-align to have any effect at all. I've set the line-height and height, but nothing has an effect.
SASS:
.lot-images {
position: relative;
float: left;
min-height: 300px;
*height: expression(this.scrollHeight < 300 ? "300px" : "auto");
padding-right: 65px;
.viewer-wrapper {
height: 415px;
width: 450px;
line-height: 415px;
position: relative;
.main {
position: relative;
display: block;
text-align: center;
height: 415px;
line-height: 415px;
width: 100%;
max-width: 450px;
max-height: 415px;
font-size: 0;
cursor: pointer;
&.small {
img {
display: inline-block;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
vertical-align: middle;
}
}
}
}
HAML:
.lot-images
%div.viewer-wrapper
.facebook
%a.pinterest{ :href => '#', :target => '_pinterest' }
.main.small
%img
%div.gallery-pager.prev.hide
%i
%div.gallery-pager.next.hide
%i
.thumbnails
This whole container is inside a modal.
Let me know if you need more info. Thanks!
It's not sass, it's scss.
And your code works. Look my example: jsfiddle
Can you explain more what's the problem? And show your html