I know this is a common question but I'm sure I'm just missing something obvious here. I'm trying to get the fontawesome icon to vertically align in the middle of the parent div, but it just keeps sitting at the top.
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
I'll refer you to here, which explains 1) your common question and 2) how to actually vertically align.
Summary: vertical align doesn't work the way you think it does, and you have to use other methods (easily found online) to vertically align.
You can also look into using flex-box or hacks already posted on SO.
Because the div is hidden using display:none the property needs to be changed to display:table and then the child div should have the property display:table-cell.
function spinner() {
$("#spinner").css("display", "table");
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
border: 10px solid red;
color: yellow;
display: table-cell;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
There is two common techniques that I know of.
Use the table method below.
Sometimes making your element to display as table creates a headache in responsive website and in that case you can use the transform:translate technique.
#spinner div {
position: relative;
}
#spinner .fa-spinner{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
display: table;
width: 100%;
}
#spinner .fa-spinner{
display: table-cell;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 5 years ago.
i have a div and within div i want to center a image.
here is code
<div class="inner-div">
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif"/>
</div>
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
border-radius: 3px;
display: table;
vertical-align:middle;
text-align:center;
background-color:red;
}
img {
display:inline-block;
margin-left: auto;
margin-right: auto;
}
i use above css but still no luck. image is not getting center in div vertically and horizontally. here is jsfiddle link https://jsfiddle.net/year4qt1/4/
looking for suggestion.
Now it looks fine https://jsfiddle.net/7t2fghtf/1/
thanks for the help Mr #Highdef
You can use absolute positioning and transform on the img while setting the parent container (inner-div) to relative position:
position:absolute; /* Absolute relative to inner-div */
left:50%; /* Top, left and transform for horizontal and vertical alignment without the use of margin or changing the display */
top:50%;
transform: translate(-50%,-50%);
Fiddle : https://jsfiddle.net/7t2fghtf/
$("#mybutton").click(function() {
// $.ajax("").done(function(){
// $("#mycontent").html( $("#anothermymodal").html());
// })
setTimeout(function() {
$("#mycontent").html($("#anothermymodal").html());
}, 10000);
});
.inner-div {
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 3px;
display: table;
vertical-align: middle;
text-align: center;
background-color: red;
position: relative;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
margin-left: auto;
margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<div style="display:none" id="anothermymodal">
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" id="mycontent">
<div class="inner-div">
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif" />
</div>
</div>
</div>
</div>
There are more ways to do this I would suggest using flex. Add this to your code:
.inner-div {
margin: auto;
width: 100px;
height: 200px;
border-radius: 3px;
display: table;
vertical-align:middle;
text-align:center;
background-color:red;
display: flex;
align-items: center;
}
Fiddle example: https://jsfiddle.net/femu288x/
https://css-tricks.com/centering-css-complete-guide/ there are many examples or ways to do this. The position:absolute answer is one way and another is flex (my fav) - check them on the link and try
I've built the front-end HTML/CSS code for a site which now needs transferring onto Wordpress. I'm using the html5blank theme as this was recommended for such purposes. I've watched a tutorial by Chris Lam and it all seems quite straightforward.
However, I'm having quite a few issues with my stylesheets - some rules seem to be applying correctly and some don't which is very strange. As per the tutorial all I've done is delete the styling code in the style.css file and replace it with my own.
Why would some rules apply and not others? Do I need to add something to another file (function.php?) that will allow my styling rules to work?
By way of an example, here's how my header and top section looks in my front-end home page -
And here's the (horrific looking) Wordpress version -
I've re-set the background image to include the link for the Wordpress version -
section#home {
height: 400px;
background: url("http://localhost:8888/wp-content/uploads/2017/07/homepagemain.jpg") center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
But it doesn't seem to want to appear.
On the nav bar, I've had to replace the tags with the following code as per the requirements in the header.php file -
<nav>
<?php html5blank_nav(); ?>
</nav>
Just wrapping the php code within an tag has no effect.
I've read that some themes require child/parent themes but that this shouldn't apply to the HTML5blank theme as its effectively an empty shell.
The same code has been transferred across into the style.css file. Do I have to delete the normalise.css files also? I was using reset.css for the front-end version. Any assistance would be appreciated.
/* GENERAL */
#import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header { background:white; width:50%; float:left; height: 100px; }
.right-header { background:white; width:50%; float:right; height: 50px; }
.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }
.right-header-bottom { background: white; float: left; width: 100%; height: 100%; }
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
/* HOME PAGE */
section#home {
height: 400px;
background: url(../images/homepagemain.jpg) center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
#agencyimage {
position: absolute;
margin: 0;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.showreel {
height: 50px;
max-width: 100%;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between;
}
.showreel, .showreel > div.seemore {
display: flex;
align-items: center;
justify-content: flex-start;
flex:1;
}
.showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
.showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
padding-left: 10px;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore {
margin-left: 30px;
}
.seeour i {
margin-right: 30px;
}
<html>
<head>
<meta charset="utf-8">
<title>Feature Media</title>
<meta name="description" content="Video technology and production">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="images/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="images/phone.png">
<p>0113 220 5265</p>
<img src="images/email.png">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
<section id="home">
<img src="images/AGENCY-BUSINESS.png" id="agencyimage" style="width: 150px; height: 250px;">
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</section>
it happens when your style-sheet is not properly added to your homepage.
You are giving this path, but this is not including the stylesheet, because the path is not correct.
<link rel="stylesheet" href="css/reset.css" />
try to add this code before your css directory
<?php bloginfo('stylesheet_directory')?>
So, it will be like that
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/css/reset.css" />
It will gives the base url of the site, so this code becomes
www.xyz.com/css/"your css file"
Do this for all link attribute for css, and make sure that all css files put up in that css folder.
Scenario: I need a container with relative positioning, which has 2 absolute positioned children. On clicking the container both children will be transitioned on transform property, one being moved to the left and one being moved to the right, both outside the window, so I need somehow to set overflow: hidden on the parent, in order not to show the transitioned elements outside of parent container.
The thing is parent does not have a height set because of the absolute children, and when I use overflow-x: hidden on it, nothing is showed anymore.
Is it possible to set an overflow so that when children gets transformed to left/right no scrollbar will be showed? I do not want to set overflow on the body element. I'm looking for CSS-only solutions, if there are any.
Also setting a fixed height for parent is not a solution to my problem, please take that into consideration.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is my SASS code
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html and body elements are set to width: 100% and `height: 100%;
I suggest to not use position: absolute or float, as neither is meant for general layout.
They both take their element out flow (in somewhat different ways though), and make it more difficult to create a responsive page.
You could simplify the code a little and use display: inline-block, like this
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Or use flexbox, which today is the recommended way to do layout
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.
.half-left, half-right {
float: left;
}
.box {
position: relaitve;
overflow: hidden;
}
Then when you add active to the parent container, the two children should transform as you intended.
Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ
I am pretty new to CSS display, currently I want to center align some text and icon(vertically), but it just not works:
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I thought a line 100% line height can control the text and inline-block elements vertically align center, but if you pay a specify attention to those icon, they are a little above the center.
"Why inline-block can not be vertically aligned?"
The point of in-line is to have elements be propagated to the screen from left-to-right; so, horizontally.
If you want it vertically, don't use elements styled with in-line because the elements naturally propagate from top to bottom; so, vertically.
vertical-align:middle seems to be what you are after but you need to apply it to the pseudo-elements too.
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width: auto;
height: 30px;
background-color: lightblue;
float: right;
line-height: 30px;
}
.menuitem,
.menuitem::before {
display: inline-block;
vertical-align: middle;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I have a problem with the cursor in IE10 any ideas? It doesn't appear at all in IE10.
http://jsfiddle.net/alexnode/y4y4A/8/
<div id="bgmbutton1">
<img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games">
<div id="otrigger1" class="button" data-case="translation"></div>
</div>
css
#bgmbutton1{position: fixed;
left: 2%;
top: 5%;
}
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}
Your approach seems to be overcomplicating things just a bit. Might I suggest a slightly more straight-forward approach instead. I've tested this to ensure it works fine in IE.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
transition: opacity .5s;
}
.button:hover .default {
opacity: 0;
}
</style>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
As you can see, this does rely on the transition and opacity properties. If you require support for older browsers, you could go back to a JavaScript approach using jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
<script>
$(function () {
$(document).on("mouseover mouseout", ".button", function () {
$(this).find(".default").stop().fadeToggle(300);
});
});
</script>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
I hope this helps you.