I am having an issue were i can move an image, no matter what i type it stays in the top right half cut out with no scrolling
.container_767 {
position: relative;
text-align: center;
color: #fff;
}
.imagetext_767 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image_767 {
position: relative;
width: 45%;
height: 45%;
left: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
<div class="container_767">
<img class="image_767" src="../images/aircraft/CS767_TN.JPG">
<div class="imagetext_767">Captain Sim 767</div>
</div>
Change the position: absolute; to position: relative; in the .imagetext_767
.imagetext_767 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
If you want to use CSS properties like left, right, top and bottom, the element have to has property position set to value absolute. Then you will be able to position it to its first parent, which has property position set to value relative. If there is no parent element with this property value, position is set acording to left top conrner of window.
In addition, to use property top or bottom to be computed by percents, parent element must has it's own height.
Look at code snippet to see the example.
.container_767 {
position: relative;
text-align: center;
background: aliceblue;
height: 500px;
}
.imagetext_767 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image_767 {
position: absolute;
width: 45%;
height: 45%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="container_767">
<img class="image_767" src="../images/aircraft/CS767_TN.JPG">
<div class="imagetext_767">Captain Sim 767</div>
</div>
Related
I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
I have placed 3 div. First parent having css like position relative and it is taking full width of viewport. 2nd children is having absolute position to cover all area of parent. The 3rd children is also having absolute position with margin: 0 auto.
.slide-block {
position: relative;
}
.slide-block .slide-block-center-wrapper {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
max-width: 1180px;
margin: 0 auto;
padding: 0 30px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
left: 0;
right: 0;
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
The problem is, .slide-block-content is not appearing in center in IE browser. It is appearing in center in chrome and mozilla.
You can try to solve it like below. For the element to be vertically centered the height needs to be known. I also changed the 3rd child to inline block and used the transform to horizontally center it. If you only need to vertically center it, you can remove the left: 50% and change the translate to translateY.
.slide-block {
position: relative;
width: 100%;
height: 200px;
background: deepskyblue;
}
.slide-block .slide-block-center-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
display: inline-block;
max-width: 1180px;
padding: 0 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
-moz-transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
*{
margin: 0px; /* Added */
padding: 0px; /* Added */
}
.slide-block {
align-items: center; /* Added */
}
.slide-block .slide-block-center-wrapper {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
max-width: 1180px;
margin: 0px;
padding:0px;
position: absolute;
top: 50%;
left:50%; /* Added */
transform: translate(0,-50%);
-moz-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
Try by adding justify-content: center to your .slide-block .slide-block-content. Hope this will work.
.slide-block .slide-block-content {
justify-content: center
}
I'm trying to center a heading both vertically and horizontally inside a div that is rotated 45deg (transform:rotate(45deg);).
Because the div is rotated - I rotate the heading the opposite direction (transform:rotate(-45deg);) and then apply regular centering techniques which doesn't work. What is the solution for this?
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
In your h1 element you defined this style
h1 {
...
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
you're overriding the first transform property with the rotate() and doing so you're losing the centering effect obtained by the negative translate(): you should chain instead the two transformation like so
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
You should also remove the default margin applied on the h1 element (edit the demo and see what happens without margin: 0;)
Example: http://codepen.io/anon/pen/jWjxeW?editors=1100
You should write one transform function right after another
I made a small change in your css, also added text-align: center;
transform: rotate(-45deg) translate(0, -100%);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg) translate(0, -100%);
text-align: center;
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
use this transform: translate(-50%, -50%) rotate(-45deg);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
You can achieve this by encapsulating your h1 in another div
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin: 0 auto;
}
#text {
position: absolute;
height: 300px;
width: 300px;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
background-color: red;
}
h1 {
text-align: center;
line-height: 300px;
margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html *
}
<html>
<body>
<div id="wrap">
<div id="text">
<h1>some centered text</h1>
</div>
</div>
</body>
</html>
If you're happy to fix the height/width of your h1 elements, something like this will do it:
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg);
height: 120px;
line-height: 40px;
width: 150px;
margin-top: -60px;
text-align: center;
margin-left: -75px;
}
Here is my code:
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
}
<div>This sentence should be displayed in the center of the whole screen
</div>
I tried margin and padding to make the div in the center of the whole screen. (horizonly and vertically). However, neither margin nor padding can center the element.
Then I tried left: 50% and top:50%, it changes the position of the element, but not as expected. The left margin of <div> is located to left:50%, while I want the center of <div> to be located to left:50%..
Does anyone have ideas about this?
use - transform: translate
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
background: #ccc;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div>This sentence should be displayed in the center of the whole screen</div>
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
transform: translate(-50%, -50%);
}
Try like this: Demo
html, body {
height: 100%;
}
body {
display: table;
margin: 0 auto;
}
div {
height: 100%;
display: table-cell;
vertical-align: middle;
}
Try this fiddle.
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 50px;
}
This should help you.
You need to use the transform:translate css.
div {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Fiddle here
Here you go. Keep position as relative and text-align it to center, if you don't want to use translate.
div {
position: relative;
text-align:center;
}
here is the fiddle
Try this:
div {
position: relative;
text-align:center;
top:50%;
}
Its Simple and Responsive try this
div {
margin: auto;
width:50%;
}
Working Fiddle Here
I'm trying to centralize a DIV with Transform in CSS, but I have another child inside which was suposed to float in an absolute position:
#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
.popup {
top: 30px;
left: 30px;
position: absolute;
display: none;
}
.popuptrigger:focus + .popup {
display: initial;
}
<div id="container">
<input class="popuptrigger">
<div class="popup">Something else</div>
</div>
Unfortunately, popup div are aligning itself at top/left of container div
How can I do this works without javascript or jQuery, i need to be pure CSS
Depending on what information you need to display, you could center the input itself and remove it from the container. You can then provide any other information in the container, making sure not to overlap the input.
Example
.popuptrigger {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 3em;
text-align: center;
background: #F00;
padding: 10px;
}
.popup {
position: absolute;
top: 30px;
left: 30px;
display: none;
}
input {
display: block;
margin-bottom: 10px;
}
.popuptrigger:focus + .popup {
display: initial;
}
<input class="popuptrigger" value="firstInput">
<div class="popup">This is the popup text.</div>
<div class="container">
<input value="second input">
<input value="third input">
</div>