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
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..
Am trying to make things look like the above image, this is for the fluid layout, but no matter what i do, that phone icon with the number 1-844.....does not move to right next to talk to us. Here is JS fiddle: http://jsfiddle.net/xtf205mk/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.top_nav_icon {
vertical-align: middle;
}
.call_icon_header {
content: url(images/call-us-icon.png);
float: left;
}
.talk_icon_header {
content: url(images/talk-to-us-icon.png);
float: left;
}
.float_right {
float: right;
}
.top_nav_icon {
vertical-align: middle;
}
.top_nav_list1 {
float: left;
}
.top_nav_list1_1 {
font-size: 1em;
width: 100%;
float: right;
}
.top_nav_list1_2 {
font-size: 1em;
width: 100%;
clear: none;
}
.top_nav_list1_2 {
font-size: 1em;
width: 100%;
clear: none;
}
Am using DW CC, but the visual aids is nowhere helping me in moving things to the right.
Can anyone help with this one please, thank you.
I've used pseudo elements to achieve your functionality requirements:
The main point to note that I want you to take from here is my use of display:inline-block;
.phone,
.talk {
position: relative;
display: inline-block;
padding-left: 50px;
height: 20px;
width: 150px;
padding-top: 10px; /*this is to 'vertically align' the text (adjust for your image height)*/
}
.phone:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
background-image: url(http://placekitten.com/g/200/300); /*change to phone icon*/
}
.talk:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
background-image: url(http://placekitten.com/g/200/300); /*change to chat icon*/
}
<div class="phone">phone here</div>
<div class="talk">chat here</div>
As a side note, I would like to point out my personal hate for floating elements, as this really can mess things up in terms of positioning elements.
This is why we have display and positioning css rules for.
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.
Please what do I have to add or change here to reduce the footer-bg to a pixel with width: 100; and height: 18;?
I'll be glad if this is looked on now as I need this help now.
Gracias.
#footer-bg {
background:#1f512e;
position: relative;
display: block;
width: 100%;
padding-bottom: 0;
min-height: 43px;
}
.footer-top {
height: 12px;
}
You can apply your dimensions using
width: 100px;
height: 18px;
http://jsfiddle.net/f9p6xbrn/2/
#footer-bg {
background:#1f512e;
position: relative;
display: block;
width: 100px;
height: 18px;
padding-bottom: 0;
min-height: 43px;
}
.footer-top {
height: 12px;
}
Simple enough. If you want the green bar to be centered and take up 960px, do this. My changes are at the bottom.
#footer-bg {
background:#1f512e;
position: relative;
display: block;
padding-bottom: 0;
min-height: 43px;
width: 960px;
margin: 0 auto;
}
If you want to set your footer to 100% and have it match the rest of your content, you would have to create some sort of container to put all your content including the footer in. Then set that container to a width of 960px with margin: 0 auto.
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);
})
})