I'm trying to center the text in the middle of JQM page, vertically and horizontally. Using 1.4.5, default theme.
In my .css I have:
.splashDiv {
position: absolute;
top: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
}
HTML
<div class="splashDiv" data-role="page">
Please wait...
</div>
The result is:
The text is vertically centered only if I remove top: 0 directive in developer tools(although not perfectly centered).
My question is what is the proper way according to JQM architecture to have what I want? I am not looking for quick/dirty workaround, unless there is no other way.
UPDATE
Put your splash div within a jQM page instead of making it the page:
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<div class="splashDiv" >
Please wait...
</div>
</div>
</div>
.splashDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
.splashDiv {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
padding:0;
}
Use this it will align your text vertically center.
Please Try it.
Your HTML
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<div class="splashDiv" >
<span>Please wait...</span>
</div>
</div>
</div>
Your CSS
.splashDiv {
position: absolute;
top: 50%;
left: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
overflow: hidden;
transform: translate(-50%, -50%)
}
.splashDiv span {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
DEMO
You need to use the following css:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
Related
Click event in below code not working when <app-tab-nav> component is included
<ion-content [fullscreen]="true">
<div id="container">
<ion-button (click)="logout()">Logout</ion-button>
</div>
</ion-content>
<app-tab-nav activeTab="home"></app-tab-nav>
Any idea what could be issue here?
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Issue was in the css, Problem is fixed after adding z-index:1
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index:1;
}
Is there another way of placing text over an image beside using position: absolute; ?
Working with position: absolute; on different screen sizes doesn't seem like the thing i want to do.
I kept looking for an answer but all i can find about it is the classic : use position absolute.
HTML:
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="img-text">Make it possible!</p>
</div>
CSS:
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 45%;
left: 45%;
}
Try this instead,
add this style to img
#header-img{width:100%;height:auto;}
if you align text in center by
.text-header{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
#header-img{width:100%;height:auto;}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 50%;
left: 50%;
color: white;
font-weight:800;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="text-header">Make it possible!</p>
</div>
Technically, no.
However, you can combine a text element with position: absolute inside of an element with position: relative. This will position the element in an absolute manner (based on pixels/percentages relative to the parent element itself, rather than the entire document.
Expanding on this, you could include an image in said element (either as a background image or as another absolutely positioned div, and use percentages to position your text relative to the container.
#rel{
display: block;
position: relative;
width: 400px;
height: 600px;
}
img{
width: 100%;
height: 100%;
}
h1{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="rel">
<img src="https://picsum.photos/400/600">
<h1>Hello world!</h1>
</div>
I'm trying to create a 3d-scene in css, but I can't seem to get it to work the way I want. What I'm trying to make is a table containing a deck of cards. My HTML looks as folows: (here the 'scene' div is the table and the 'item' is the deck of cards)
<div class="scene-wrap">
<div class="scene">
<div class="item">
<div class="item__right">
</div>
<div class="item__front">
</div>
<div class="item__top">
</div>
</div>
</div>
</div>
The item is missing a left and back side, but that's not important at this point. I've made a fiddle here, with the CSS: https://jsfiddle.net/do76ro22/
The problem is that the item element doesn't look realistic, as if the perspective is incorrect. The left border is diagonal but should be straight, to make it look like a real scene. You can see it better if you change the rotateX value on the scene class.
Does anyone know how to make this look more realistic?
probably the property that you are lookin for is
perspective-origin: left center;
I have added a little left positioning so that it doesn't collapse
.scene-wrap {
width: 800px;
height: 400px;
position: relative;
top: 100px;
left: 100px;
background: yellow;
perspective: 800px;
perspective-origin: left center;
}
.scene {
width: 100%;
height: 100%;
background: green;
transform-style: preserve-3d;
transform: rotateX(50deg);
position: absolute;
}
.item {
width: 200px;
height: 300px;
background: red;
position: relative;
transform-style: preserve-3d;
left: 5px
}
.item__right {
height: 100%;
width: 100px;
position: absolute;
top: 0;
left: 100%;
background: blue;
transform: rotateY(-90deg);
transform-origin: left center;
}
.item__front {
height: 100px;
width: 100%;
position: absolute;
top: 100%;
left: 0;
background: lightblue;
transform: rotateX(90deg);
transform-origin: center top;
}
.item__top {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: darkblue;
transform: translateZ(100px);
}
<div class="scene-wrap">
<div class="scene">
<div class="item">
<div class="item__right">
</div>
<div class="item__front">
</div>
<div class="item__top">
</div>
</div>
</div>
</div>
I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%
#first {
position: relative;
width: 20%;
height: 20%;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
border-radius: 50%;
background-color: blue;
}
<html>
<body>
<div id="first">
<div id="second">
</div>
</div>
</body>
</html>
How to get it i want the second div in the exact center of the first div but it is not even visible. how achieve this without using left, top attributes.
note:i wants align it only using css but not using tag.
To center absolutely positioned div with known width, you can use this:
.inner1 {
left: 0;
right: 0;
margin: auto;
}
Or, if you need to center it both horizontally and vertically:
.inner2 {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
If width of inner is unknown - use css3 transforms:
.inner3 {
left: 50%;
transform: translateX(-50%);
top: 0;
}
Ant for vertical centering also:
.inner4 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Fiddle demo: https://jsfiddle.net/4qxpc0ua/
calculate the top and left position and apply it for the second div.
#first {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
left:42.5%; //50% - (15% / 2)
top:42.5%; //50% - (15% / 2)
border-radius: 50%;
background-color: blue;
}
DEMO
There are several possibilities to do what you want:
.outer {
background: lightblue;
width: 300px;
height: 100px;
}
.inner {
background: black;
width: 100px;
height: 50px;
color: white;
}
<div class="outer" align="center">
<div class="inner">
Deprecated (use css)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="position: relative; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer" style="position: relative">
<div class="inner" style="position: absolute; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="margin: 0 auto;">
</div>
</div>
Another solution
.outer {
width: 100%;
text-align: center;
}
.inner {
display: inline-block;
}