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%);
}
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've been trying to center both horizontally and vertically a specific div, and I got the vertical part to center, just not the horizontal part.
I'm using translate(-50%, -50%), which should be centering in a center, but is not working...
The part that says "Or login to your acccount" is the part I'm trying to vertically center.
Link to the site
Relevant CSS:
.logindiv {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
you need to do 2 things:
add a wrapper(this will be the green div), let's call login-wrap, and give it this properties:
.login-wrap {
float: left;
height: 100%;
position: relative;
width: 40%;
}
change relative to absolute here
.logindiv {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
Try adding margins for horizontal center positioning
.logindiv {
margin-right: auto;
margin-left: auto;
}
transform is working. Try this one. You have to define your transform style for all the browsers.
.logindiv {
left: 50%;
transform: translate(-23%, -38%);
-ms-transform: translate(-23%, -38%); /* IE 9 */
-webkit-transform: translate(-23%, -38%) /* safari*/
width: 382px;
position: relative;
}
Here is your original code:
.logindiv {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
By changing the position to absolute, you can move the logindiv around with the transform: translate() (which does X first, then Y)
I chose 60%, -70% as that looked centered with the left on my screen, but mess around with it. This was the only way I could find to let it resize the same way as the welcome text on the left.
New code:
.logindiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(60%, -70%);
}
I'm trying to vertically align the first div at the center of the browser and everything below it below that div.
I may be able to wrap these two divs in another div and centering that div may work, but I can't change this html structure and have to achieve with two divs only. The first div is a dynamic container where different html will be displayed. The second div is static.
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Add width and margin: auto 0 to the css class and apply it to the div elements.
like this:
.center {
margin: 0 auto;
width: 200px;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div class="center">I'm just below the center!</div>
This should work (I added the color only to make it easier to see the result)
.center {
width:750px;
margin-left: auto;
margin-right: auto;
background-color:Red;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Summary:
You can use this code that is in the jsfiddle.
I wrote two classes named .center-x and .center-y. You can use these classes when you want to center elements by x and y axes.
The code:
.box-1 {
background: #00adef;
padding: 5px 10px;
}
.box-2 {
background: #ccc;
padding: 5px 10px;
position: absolute;
top: 100%;
width: 170px;
}
.center-y {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-x {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.center-x.center-y {
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="box-1 center-y center-x">
I'm at the center of the Browser!
<div class="box-2 center-x">I'm just below the center!</div>
</div>
And if you want to center by vertical, just remove the .center-x class from .box-1. Else if you want to center by horizontal, just remove the .center-x class from .box-1.
If the browser supports viewport units, you can use this way:
.center {
position: relative;
left: 0;
margin-top:50vh;
}
See it working: http://jsfiddle.net/fgpqkrr4/
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%;
For a site I am making I want to have a nice rotated "navigation" bar, just simple links really at the top of the page.
The code I have got:
div.home
{
position: absolute;
top: 0px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
text-transform: rotate(45deg);
}
And:
<div class="home">
Home
</div>
This makes the text bunch up at the top of the element. Ideally I want it to be at the bottom of the element,
I don't Know what exactly you want but these maybe helpful
<div class="home">
<div class="text">
Home
</div>
</div>
div.home
{
position: absolute;
top: 30px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
-webkit-text-transform: rotate(90deg);
}
.text{
margin-top:100px;
font-size:26px;
-webkit-transform: rotate(-90deg);
color:white;
}
DEMO
Don't transform the text. transform (and -ms-transform, -webkit-transform and so on) include rotating text with it and receive mouse events in the new position.
I don't know if this is exactly what you're having trouble with but change the top value to something like '30px'.
Demo