Is it possible to define the position (center), in this case the image div, in the div with overflow?
http://jsfiddle.net/KAy22/1/
#scroll-h-v {
width: 300px;
height: 300px;
position: relative;
overflow: auto;
}
.image {
text-align: center;
margin-left: auto;
margin-right: auto;
position: relative;
}
The Image should on load in the center like this:
you may play with top and left position and margin property as below
.image {
text-align: center;
margin-left: auto;
margin-right: auto;
position: relative;
top:50%;
left:50%;
margin-top:-500px;
margin-left:-500px;
}
http://jsfiddle.net/KAy22/2/
Hope it helps!
Related
So I have an image on my website and I want to perfectly center it. I have tried many things but none have worked.
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
}
<img src="images/astronaut.png">
The simplest way to centre an image horizontally is with:
img {
display: block;
margin-right: auto;
margin-left: auto;
}
Like this?
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<img src="images/astronaut.png">
The centering codes are the left, top, and especially the transform
Have a look at the following links for further help, hope it helps.
https://www.w3.org/Style/Examples/007/center
https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
html {
width: 100%;
height: 100%;
background:url(http://tse4.mm.bing.net/th?id=OIP.IX1fAIIUJ82DtdfgR2tSnADhEs&w=207&h=276&c=8&qlt=90&o=4&dpr=2&pid=1.7) center center no-repeat;
}
Setting the left and right margin to auto will center the image horizontally within it's parent if your position isn't set or is set to relative.
So you could use:
img {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 40%;
z-index: -5
}
If your position needs to be set to absolute, you can use CSS3's viewport sizing to center your image. This would place the image in the exact center of the page; so if you want to center the image within a sidebar, for example, don't use this method. You'll need to set a width for your image and then align it using the "left" property. That would look like this:
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
width: 500px;
left: calc( 50vw - 250px );
}
The viewport is always 100vw wide, so setting the left property to 50vw - 1/2 of the image's width will center it on the page.
You can also use jQuery to similarly calculate the proper alignment and position the element.
You can put the image in a div and make it 100% of the screen in width and height.
Then add text-align:center; to center it horizontally.
Then set the line height to 100% and then add vertical-align: middle; to the image to center it vertically.
body{
background-color: black;
}
.CenterImage img {
height: 40%;
z-index: -5;
vertical-align: middle;
}
.CenterImage{
width:100vw;
height:100vh;
line-height: 100vh;
text-align:center;
}
<div class="CenterImage"><img src="images/astronaut.png"></div>
body{
background-color: black;
}
img {
position: absolute;
text-align: center;
height: 40%;
top: 50%;
left: 50%;
z-index: -5
}
<img src="images/astronaut.png">
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
As you can see on the picture below, my submit button ("envoyer" in french) is placed outside its container (the container has a red background and is called .footer-content)
I haven't been able to recreate the issue on jsfiddle so here is the direct link (I haven't been able to identify the issue using firebug)
.footer-content {
position: relative;
margin-right: auto;
margin-left: auto;
height: auto;
clear: both;
z-index: 9;
max-width: 700px;
background: red;
margin-top: 40px;
}
Because your formulars position is absolute and its containers height is auto (absolute positioned elements don´t influence their parents height)
Use this CSS for your formular
#contactfrm {
position: relative;
float: left;
}
Try this:
.footer-content {
margin: 40px auto auto auto;
width: 100%;
max-width: 700px;
height: auto;
background: red;
position: relative;
clear: both;
z-index: 9;
overflow: auto;
}
I am having a problem with displaying a div. For some reason it is not displaying the inner div.
The position of parent div is relative where as the child div is absolute.
Here is the demo http://jsfiddle.net/squidraj/6R3Hr/6/
HTML Code :
<div class="page-center">
<div class="question_slide inidfeedback">Test</div>
</div>
CSS Code :
.question_slide {
background: #000000;
height: 569px;
width:100%
}
.question_slide {
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
Just interchange their positions.
.question_slide {
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: absolute;
text-align: center;
width: 100%;
}
Here is a demo:http://jsfiddle.net/6R3Hr/3/
Give it a height style. Since the only content is relatively positioned, it doesn't have any inherent height value and because the overflow is hidden, it's not onscreen.
http://jsfiddle.net/squidraj/6R3Hr/2/
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
height:20px;
}
Edit:
If overflow:hidden is a must, then you must specify a height for your relative div:
.page-center {
margin: 0 auto;
max-width: 1100px;
position: relative;
text-align: center;
width: 100%;
overflow:hidden;
height:100px;
}
Just choose how much height will work for you.
Here's a working jsfiddle with your code.
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child