I'm having a hard time solving the following problem:
I'm trying to position a few pictures in the following manner:
They all take the whole width of the screen (I know their number)
The sequence of pictures is aligned in the middle vertically
I have found this answer, but it's not too helpful, as it allows centering only one image.
Also, vertical-align won't help much, since it only positions inline elements.
Here's my working example:
https://jsfiddle.net/3psbtqxv/1/
body {
padding-top: 5%;
position: absolute;
vertical-align: middle;
}
img {
max-width: 20%;
height: auto;
}
<body>
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</body>
I would appreciate some help.
First google search of "css position center of page" gave me this result:
Quick CSS Trick: How To Center an Object Exactly In The Center
In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
This works wonderfully when you know the size of the thing you are centering. If you don't know, or are thinking it might change and want to be future proof, try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
This works with your example.
Edit:
If you want it to take the whole screen width then use
.centered {
position: fixed;
top: 50%;
left: 0%;
/* bring your own prefixes */
transform: translate(-0%, -50%);
}
Try this
img {
max-width:20%;
height:auto;
margin-top: 50%;
}
The best way to center child element is using flexbox.
#parent{
display:flex;
justify-content: center;
align-items: center;
width:200px;
height:200px;
background-color:red;
}
#child{
width:100px;
height:100px;
background-color:blue;
}
<div id="parent">
<div id="child">
child
</div></div>
There are several ways to achieve that, but most of the methods will need some update in your markup. I created this Fiddle which center the images adding some extra wrappers around. I hope it helps.
HTML:
<body>
<div class="wrapper">
<div class="inner">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
}
.inner img {
width: 20%;
float: left;
}
Related
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
I'm trying to get exactly the same effect as here: Responsive images positioned over image , so I want my absolute positioned elements to stay in the same place but get smaller or bigger when the browser is being sized. I tried many different possibilites, before I worked with this code, but I don't understand why my wrapping container (id="wrapper") is placed under the image. And to get the question mark on the image I would need to use minus percentage. In the example I copied from another question in stackoverflow there are bootstrap styles. I don't know and I don't want to use bootstrap though. I will be very grateful for all suggiestions what I'm doing wrong.
#wrapper {
position: relative;
display: inline;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
This is my fiddle: https://jsfiddle.net/8obzf2c8/2/
inline elements doesn't get the height of the elements inside them.
You should remove the display: inline from the #wrapper element.
#wrapper {
position: relative;
margin-top: 150px;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
I also set margin-top to make sure the question mark image is in the viewport.
Your wrapper has property display: inline; so it behave like a fe. span element, it is not a block.
Change display: inline; to display: inline-block; so the wrapper behaves like inline container. You will also need to change this weird top: -43%; to fe. top: 43% as things will get more normal and predictable.
Use display:inline-block; instead of inline
#wrapper {
position: relative;
display: inline-block;
}
#questionMark {
position:absolute;
left:33%;
top:43%;
max-width: 10%;
}
This will make the image placed in the center and will also be responsive with all screen sizes.
#wrapper {
position: relative;
display: inline-block;
}
img{
width: 100%;
height: auto;
}
#questionMark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
Hope this helps,
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
Is there a way to CENTER A DIV vertically and horizontally but, and that is important, that the content will not be cut when the window is smaller than the content The div must have a background color and a width and hight.
I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?
I have the example here to play: http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"
For modern browsers
When you have that luxury. There's flexbox too, but that's not broadly supported at the time of this writing.
HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tinker with it further on Codepen or on JSBin
For older browser support, look elsewhere in this thread.
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Here's a demo:
http://www.w3.org/Style/Examples/007/center-example
A method (JSFiddle example)
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
Another method
(JSFiddle example)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
The legitimate way to do that irrespective of size of the div for any browser size is :
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Live Code
You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.
I forked your JSBin to apply it : http://jsbin.com/iquviq/7/edit
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.
My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.
So, with this HTML:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
This CSS:
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
This jQuery might be useful:
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).
I'm having a problem centering an element that has the attribute position set to absolute.
Does anyone know why the images are not centered?
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
If you have set a width you may use:
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
EXAMPLE HERE
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted for brevity)
Explanation
Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.
This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).
While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).
For unidirectional alignment, go with translateX(-50%) or translateY(-50%) instead.
1. An element with a position other than static. I.e. relative, absolute, fixed values.
Centering something absolutely positioned is rather convoluted in CSS.
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
Change margin-left to (negative) half the width of the element you are trying to center.
Div vertically and horizontally aligned center
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Note : Elements should have width and height to be set
If you want to center an absolute element
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered left to right, but not with top to bottom
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered top to bottom, regardless of being left to right
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Update as of December 15, 2015
Well I learnt this another new trick few months ago. Assuming that you have a relative parent element.
Here goes your absolute element.
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
With this, I think it's a better answer than my old solution. Since you don't have to specify width AND height. This one it adapts the content of the element itself.
Update as of April 23, 2021
It does not answer to OP's question about position absolute, but if you want alternative solution, there's this called flexbox. Here's an example.
#parent {
display:flex;
align-items:center;
justify-content:center;
}
What it does is the container is converted to flex and to align child items to center on horizontal is by using justify-content:center and vertical is to use align-items:center. It does support modern browsers too, so it's safe to use.
Though, be sure to read how flexbox work first.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Flexbox supported browsers
https://caniuse.com/flexbox
A simple CSS trick, just add:
width: 100%;
text-align: center;
This works on both images and text.
This worked for me:
position: absolute;
left: 50%;
transform: translateX(-50%);
To center a “position: absolute” element.
.your-element {
position: absolute;
left: 0;
right: 0;
text-align: center; // or this -> margin: 0 auto;
}
to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
for vertical center absolute you need to do the same thing bud not with left just with top.
( NOTE: html and body must have min-height 100%; )
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
and can be combined for both
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
Or you can now use flex box with postion absolute:
.parent {
position: relative;
display: flex;
justify-content: center;
}
.child {
position: absolute;
}
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
see demo on: http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center; works with a position: absolute element when adding left: 0; right: 0;
You can use the "transform" attribute:
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
The simpler, the best:
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
Then you need to insert your img tag into a tag that sports position:relative property, as follows:
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
If you don't know the width of the element you can use this code:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
Demo at fiddle: http://jsfiddle.net/wrh7a21r/
Source: https://stackoverflow.com/a/1777282/1136132
probably the shortest
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
as many others said this ⬇️
.element {
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -50%);
}
should work. But be aware, that the .element must be in a wrapper that has position: relative; (in case you don't want to make it in the center of the whole HTML page)
FYI: I've made a pseudo-library for CSS centering. I needed it for my dev juniors. So, feel free to check it out. http://dev.solcode.net/centercss/
Using
left: calc(50% - Wpx/2); where W is the width of the element works for me.
I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.
Explanation
The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.
Your images are not centered because your list items are not centered; only their text is centered. You can achieve the positioning you want by either centering the entire list or centering the images within the list.
A revised version of your code can be found at the bottom. In my revision I center both the list and the images within it.
The truth is you cannot center an element that has a position set to absolute.
But this behavior can be imitated!
Note: These instructions will work with any DOM block element, not just img.
Surround your image with a div or other tag (in your case a li).
<div class="absolute-div">
<img alt="my-image" src="#">
</div>
Note: The names given to these elements are not special.
Alter your css or scss to give the div absolute positioning and your image centered.
.absolute-div {
position: absolute;
width: 100%;
// Range to be centered over.
// If this element's parent is the body then 100% = the window's width
// Note: You can apply additional top/bottom and left/right attributes
// i.e. - top: 200px; left: 200px;
// Test for desired positioning.
}
.absolute-div img {
width: 500px;
// Note: Setting a width is crucial for margin: auto to work.
margin: 0 auto;
}
And there you have it! Your img should be centered!
Your code:
Try this out:
body
{
text-align : center;
}
#slideshow
{
list-style : none;
width : 800px;
// alter to taste
margin : 50px auto 0;
}
#slideshow li
{
position : absolute;
}
#slideshow img
{
border : 1px solid #CCC;
padding : 4px;
height : 500px;
width : auto;
// This sets the width relative to your set height.
// Setting a width is required for the margin auto attribute below.
margin : 0 auto;
}
<ul id="slideshow">
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>
I hope this was helpful. Good luck!
An absolute object inside a relative object is relative to its parent, the problem here is that you need a static width for the container #slideshowWrapper , and the rest of the solution is like the other users says
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
http://jsfiddle.net/ejRTU/10/
Here is easy and best solution for center element with “position: absolute”
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
Just use display: flex and justify-content: center on the parent element
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
display: flex;
justify-content: center;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 100px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
<!-- Images from Unsplash-->
You can find this solution in JSFIDDLE
You can try this way :
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>
1- when you know the width of the absolutely positioned element.
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px
2- when you don’t know the width of the absolutely positioned element. Excellent for responsiveness but is CSS3 older browsers may have an issue.
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
3- when you don’t know the width of the absolutely positioned element but makes it 100% wide of it’s parent which might not fit the design.
position: absolute;
left: 0;
right: 0;
margin: auto
If you do know the width, you can use the third option as well and it will center.
My favorite method to absolute center any element or group of elements is to absolute position their container, make it the height and width of the relative container, then use flex to align the elements within.
In this specific case:
body {
position: relative; /* OPTIONAL */
}
#slideshowWrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row; /* OPTIONAL IF ONLY ONE ELEMENT */
justify-content: center;
align-items: center;
}
Hope that helps, cheers.
For this case, I think the code as below is enough:
ul#slideshow li {
position: absolute;
left: 0;
right: 0;
}
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
I don't remember where I saw the centering method listed above, using negative top, right, bottom, left values.
For me, this tehnique is the best, in most situations.
When I use the combination from above, the image behaves like a background-image with the following settings:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
More details about the first example can be found here:
Maintain the aspect ratio of a div with CSS
Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).
I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a position:relative and that will center them. Given your current CSS
Check out http://jsfiddle.net/rtgibbons/ejRTU/ to play with it
What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
Until I'd read this posting, using the margin:0 auto technique, to build a menu to the left of my content I had to build a same-width column to the right to balance it out. Not pretty. Thanks!
Use margin-left: x%; where x is the half of the width of the element.
I am working with a div that is 100% of the parent divs height.
The div only contains a single line of text.
The div cannot have a fixed height.
So my question is.
How do I vertically center the line of text?
I have tried using:
display: table-cell;
line-height:200%;
If it is important the div is absolutely positioned.
Current CSS
.requests {
position: absolute;
right: 0;
height: 100%;
width: 50px;
padding: 0 10px;
background-color: #69A4B5;
display: table-cell;
vertical-align: middle;
border-bottom-right-radius: 5px;
}
The best and easiest way to do it (currently in 2015 2020) is using flexbox:
.parent-selector {
display: flex;
align-items: center;
}
And that's it :D
Check-out this working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
justify-content: center;
/* Actual code */
display: flex;
align-items: center;
}
<div>
<p>Hola</p>
</div>
Old answer: You can use vertical-align: middle if you specify also display: table-cell;
.div {
display: table-cell;
vertical-align: middle;
}
Working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
text-align: center;
/* Actual code */
display: table-cell;
vertical-align: middle;
}
<div>
<p>Hola</p>
</div>
If it does not work you can try setting its parent as display: table;:
.parent-selector {
display: table;
}
Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?
This answer is no longer the best answer ... see the flexbox answer below instead!
To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:
margin-top: -0.5em;
for example:
http://jsfiddle.net/45MHk/623/
//CSS:
html, body, div {
height: 100%;
}
#parent
{
position:relative;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
/* adjust top up half the height of a single line */
margin-top: -0.5em;
/* force content to always be a single line */
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:
http://jsfiddle.net/45MHk/
//CSS:
#parent
{
position:relative;
height: 3em;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
Try this one http://jsfiddle.net/Husamuddin/ByNa3/
it works fine with me,
css
.table {
width:100%;
height:100%;
position:absolute;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%:
}
and the html
<div class="table">
<div class="cell">Hello, I'm in the middle</div>
</div>
Since it is absolutely positioned you can use top: 50% to vertically align it in the center.
But then you run into the issue of the page being bigger than you want it to be. For that you can use the overflow: hidden for the parent div. This is what I used to create the same effect:
The CSS:
div.parent {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
div.parent div.absolute {
position: absolute;
top: 50%;
height: 300px;
}
The HTML:
<div class="parent">
<div class="absolute">This is vertically center aligned</div>
</div>
I disagree, here's a JS free solution, which works:
<html style="height: 100%;">
<body style="vertical-align: middle; margin: 0px; height: 100%;">
<div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
<div style="display: table-cell; width: 100%; vertical-align: middle;">
<div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
</div>
</div>
</body>
</html>
Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.
HTML
<div class="parent">
<div class="child">Text that needs to be vertically centered</div>
</div>
CSS
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
If you know how tall your text is going to be you can use a combination of top:50% and margin-top:-x px where x is half the height of your text.
Working example:
http://jsfiddle.net/Qy4yy/
just wrap your content with a table like this:
<table width="100%" height="100%">
<tr align="center">
<th align="center">
text
</th>
</tr>
</table><
have you tried line-height:1em;? I recall that that's the way to get it to center vertically.
Did you try vertical-align: middle ???
You can find more info on vertical-align here: http://www.w3schools.com/css/pr_pos_vertical-align.asp
Vertical align, dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS (eg. jQuery). (can possibly be solved with backend code in some cases, or min-height combined with sensible top or margin styles, but not perfect)
I mostly only use absolute position when something is supposed to "popup" in relation to something else which is in the float, I think that's the best way to use it so you don't have to fiddle with things like this.
No offense, but most answers in here are way off.
Setting the line height to the same as the height of the div will cause the text to center. Only works if there is one line. (such as a button).
Modern solution - works in all browsers and IE9+
caniuse - browser support.
.v-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Example: http://jsbin.com/rehovixufe/1/