I've made a simple under construction website which has an image and some text centred in the middle of the page like following:
HTML Code:
<body>
<div id="container">
<span id="wip">Under Construction</span>
<img id="image" src="katte.jpg">
<span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span>
</div>
</body>
CSS Code:
body {
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
text-align: center;
}
#container {
max-width: 1230px;
width: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#image {
width: 100%;
}
#text {
font-size: 20px;
padding: 0 15px;
display: block;
}
#wip {
font-size: 40px;
padding: 0 15px;
display: block;
}
Link: http://katteboxen.dk/
Everything is working good except when it comes to iPads. The content is showing like when for example the css rule transform: translate(-50%, -50%); wasn't applied for the container. What are the alternatives for fixing this issue? Any guidance or feedback is more than welcomed.
You might need to try browser specific prefixes for transform property, so:
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
should do the trick.
For reference have a look here
transform property are browser based property set -webkit-transform, -moz-transform, -o-transform .... ans so set it according to your i-pad browser i this it will solve the problem
or just use
margin-left:-50%;
margin-top:-50%;
Related
code
<div class="center">
<div class="parent">
<label>姓名</label>
<input type="text">
</div>
</div>
.center {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.parent {
padding: 8px 0;
}
label {
margin-left: 20px;
}
input {
width: 100px;
height: 41px;
}
I want to know why the top border of the input disappears.I would be appreciated if someone answers me.
os: win10
browser: chrome 51.0.2704.84m
Thanks.
The problem is occurring because of transform: translate(-50%, -50%);
You can modify your css to removing transform
.center {
position: relative;
width: 100%;
}
.parent {
padding: 8px 0;
margin: 15% auto;
width: 100px;
}
label {
margin-left: 20px;
}
input {
width: 100px;
height: 41px;
}
This is a graphical glitch caused by your element being rendered on a sub-pixel by the translation transform (ie: 10.5px or the like).
There are some known solutions to fix this issue, though I haven't had much luck with them:
1) Use transform: transform: translate(-50%, -50%) perspective(1px);
2) On the parent element, add.
.parent {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
If you do not require support for older browsers, you may use flexbox:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I have this code to align the title and image in the ionic header bar:
CSS:
.banner-top {
background-color: #EE7130;
height: 19.6vw;
}
.banner-top h2 {
font-family: "JEMBOhands", sans-serif;
font-size: 9vw;
color: white;
#s_back {
margin-left: 3.4vw;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Markup
<a href="#/list" nav-transition="none"><ion-header-bar class="banner-top" align-title="left">
<h2 id="s_back"><img src="img/back_b.png" id="s_back_img"alt="">STORIES</h2>
</ion-header-bar></a>
It looks soso in the browser:
And like this on the device:
What is my mistake?
Here is a ionic play: http://play.ionic.io/app/b3660e2f6a0c
UPDATE: It's working now in ionic play but is still wrong in the iOS simulator.. http://play.ionic.io/app/bb1620290ea4
#Oliver: I have checked your code and saw the style for s_back
#s_back {
margin-left: 3.4vw;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Can you try to add more vendor specific for transform property like so, not sure 100% :D
#s_back {
margin-left: 3.4vw;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
transform: translateY(-50%);
}
I was wondering if I could have someone's help as I'm having difficulty vertically and horizontally centring the text in the centre of the page.
Thanks for taking the time, have a good day.
html:
<div class="somethingsimple">
</p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>
Css:
.somethingsimple
{
position: absolute;
top: 50%;
text-align:center;
margin-left:auto;
margin-right: auto;
font-family: font-family: 'Open Sans', sans-serif;
font-size: 22px;
}
Just add width:100%; to somethingsimple like this:
.somethingsimple {
/* your current "absolute positioning" style properties */
width:100%;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/6pwth4zv/
you can additionally add this css-
transform: translateY(-50%);
this moves the text up by 50% of its height, so its centered vertically. http://jsfiddle.net/ym1tys16/
AND finally to align it center horizontally you can use -
left: 50%;
transform: translateX(-50%);
For both horizontal as well as vertical centering, use transform like this -
transform: translate(-50%, -50%);
Fiddle Demo
Full snippet -
.somethingsimple {
position: absolute;
top: 50%;
text-align: center;
left: 50%;
font-family: font-family: 'Open Sans', sans-serif;
font-size: 22px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
<div class="somethingsimple">
<p>"...I place importance on honesty and expressiveness when creating for a society that is heavily influenced by art."</p>
</div>
I want to create a simple full-screen overlay with loader and text in the center. I have some problems with the text. I want the image to be over ABOVE the text. Can you help me with this?
<div id="loadingOverlay" class="loader-overlay">
<div class="loader-content loader-center">
<img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center" alt=""/>
<div class="loader-center loader-text">Loading, please wait...</div>
</div>
</div>
http://jsfiddle.net/bLz7wgvs/2/
[edit]
Sorry for my English. I meant "above", not "under"...
It should look like:
[-------------loader here-------------]
Loader text (plz wait, etc.) in one line, both centered horizontally and vertically
Edit
I didn't know you wanted to let the image appear above the text. I've changed your code a little bit: http://jsfiddle.net/bLz7wgvs/7/
CSS:
.loader-overlay {
-ms-opacity: 0.9;
background: #444;
display: block;
height: 100%;
left: 0;
opacity: 0.9;
position: fixed;
top: 0;
vertical-align: middle;
width: 100%;
z-index: 100000;
}
.loader-content {
margin-left: auto;
margin-top: auto;
width: 50%;
}
.loader-center {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: block;
position: fixed;
top: 50%;
transform: translate(-50%, -55%);
}
.loader-text {
color: #FFF;
font-size: 18px;
height: 50%;
}
Try this,
.loader-overlay {
-ms-opacity: 0.9;
background: #444;
display: block;
height: 100%;
left: 0;
opacity: 0.9;
position: fixed;
top: 0;
vertical-align: middle;
width: 100%;
z-index: 100000;
}
.loader-content {
height: auto;
margin-left: auto;
margin-top: auto;
width: auto;
}
.loader-center {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
z-index:1;
}
.loader-text {
color: #FFF;
font-size: 18px;
z-index: 1;
}
Ive added z-index to the image and loader text :)
You just need to add a z-index to the image (and the associated class required to the HTML element):
.loader-img {
z-index: 10;
}
http://jsfiddle.net/bLz7wgvs/4/
Otherwise, you can just replace the order of the elements in the DOM if you have control over this. Siblings will appear above other siblings if they appear after them in the DOM tree As stated in the spec:
Within each stacking context, the following layers are painted in
back-to-front order:
the background and borders of the element forming the stackingcontext.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned
descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).
So you can just change the markup to:
<div id="loadingOverlay" class="loader-overlay">
<div class="loader-content loader-center">
<div class="loader-center loader-text">Loading, please wait...</div>
<img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center loader-img" alt=""/>
</div>
</div>
http://jsfiddle.net/bLz7wgvs/6/
I know this issue has been discussed a lot and i have read over the other questions and answers but i have not been able to solve this issue. I am using bootstrap and i want to center a div which works in chrome and firefox however in explorer the content is on the right side of the screen. I am unsure of what approach to take in order to correct the position. The css for my page is:
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
background-color: white;
font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
color: black;
}
u {
color: red;
}
.container {
position: relative;
height: 14rem;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
background-color: white;
}
.fa-exclamation-triangle {
color: red;
padding-right: 10px;
}
<body>
<div class="jumbotron vertical-center">
<div class="container">
<h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
<center>
<h3>Main Content.</h3>
</center>
</div>
</div>
</body>
I have included a fiddle Here. Thank you for any help and suggestions
It's because you are missing normal transform property (and -ms for old browsers)
http://jsfiddle.net/tvc4tv9L/2/
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Try adding transform: translate(-50%, -50%) and -ms-transform: translate(-50%, -50%) to .jumbotron for IE9+.
Another way to do this:
html,
body {
height: 100%;
width: 100%;
margin: 0 auto;
background-color: white;
font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
color: black;
}
u {
color: red;
}
.container {
position: relative;
height: 14rem;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
width:300px;
height:200px;
margin:-100px 0 0 -150px;
}
.fa-exclamation-triangle {
color: red;
padding-right: 10px;
}
<body>
<div class="jumbotron vertical-center">
<div class="container">
<h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
<center>
<h3>Main Content.</h3>
</center>
</div>
</div>
</body>
Never ever use the <center> tags. Use the css equivalent instead: text-align: center;
You forgot the -ms- prefixed translate property.
If you don't care about support for IE9 or lower: You can use flexbox for this as well.
html, body {
height: 100%;
width: 100%;
}
body {
display: flex;
background: black
}
.jumbotron {
margin: auto;
background: white;
}
.container {
text-align: center;
}
<body>
<div class="jumbotron vertical-center">
<div class="container">
<h1>Title</h1>
<h3>Main Content.</h3>
</div>
</div>
</body>