This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)
Related
I have a div that I want to position at the center of a page(both vertically and horizontally).
For centring it horizontally I used the center tags around the div and for vertically centring it is tried a couple of things but none of them actually working.
Check out the code:
CSS:
.vcenter{
height: 50px;
width: 50px;
background: red;
vertical-align: middle;
margin-top: calc(50% - 25px);
}
HTML :
<center>
<div class="vcenter">
</div>
<center>
Also I don't think using centre tags around the the div to centre an object is the best way to so it.
What I want to know is
How can I centre the div both vertically and horizontally no matter what the size of the screen is ?
Is there a better way to centre the div horizontally rather than using the center tags ?
If available, using flex is the easiest. Apply these styles to the container in which you want to center your div:
display: flex;
align-items: center;
justify-content: center;
#divId {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The only thing that isn't obvious is the transform takes into account the size of the element.
For whatever reason I am really beating myself up with this... No doubt because of the lack of support for a real "proper" way of vertically centering anything.
The Goal:
Is to have a set of four images, each inside their own responsive columns. Each image has a white overlay, that when hovered reveals more of the image, as well as a title for each of the 4 images that is horizontally and vertically centered inside the image.
I could easily achieve this if I set specific width/heights and stuck the image inside CSS rather than the HTML. For SEO reasons I want the image to be present in the HTML.
Additionally because of the responsive nature, the images must scale to 100% of the width of the column they reside in. Consequently, because the width scales, the height scales as well.
So the first issue is getting the "caption" as I am calling it in my classes, to appear over the top of the image. Easily done with a simple position: absolute; as well as top: 0; and left: 0; on the caption and position: relative; on the container.
The big problem and second issue, is vertically centering the "Gallery 1" text over the top of the image. I have to use the position: absolute; bit as I mentioned above just to get the text over-top of the image. From there I can't manage to get a display: table; solution to work, nor a -50% margin solution to work.
Here is a JS Fiddle
My HTML:
<div class="container">
<img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
<div class="caption">
Gallery 1
</div>
</div>
Any ideas on how to achieve this? I would like to stay at least IE8 supported, and I am using selectivizr already, so pseudo-classes don't bother me.
First, I wasn't sure about what you mean exactly. But as you mentioned:
The issue is centering the text Gallery 1 vertically over the top of the image. Centering it horizontally is easy with a simple text-align but centering it vertically is what is eluding me.
Here is my attempt to align the text vertically over the image. Actually the concept comes from this approach of a similar topic on SO:
.container { position: relative; }
.container img {
vertical-align: bottom; /* Remove the gap at the bottom of inline image */
max-width: 100%;
}
.caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a; /* Remove the gap between inline(-block) elements */
}
.caption:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.caption a {
font: 16px/1 Arial, sans-serif; /* Reset the font property */
display: inline-block;
vertical-align: middle;
text-align:center;
background: rgba(255, 255, 255, 0.75);
width: 100%;
padding: 1% 0; /* Added a relative padding for the demo */
}
WORKING DEMO.
This relies on CSS2.1 and it will definitely work on IE8+ (excluding rgba()).
If I understand your issue correctly, this may work for you:
Working Demo
If you need the image to scale when hovered over, then simply adding a :hover on the container and changing it's width should work.
CSS:
.container {
// existing styles
-webkit-transition: all .2s; // needs prefixes for other browsers.
}
.container:hover {
width: 500px;
}
The only issue is that transition has no support for IE9 or earlier. So you'd need to go a JS route if that is an issue.
thiv.net/mobile needs to work on mobile, and it does, however when I turn my ipod to vertical, it changes drastically, my problem is i need the whole lot, textbox, button and image to be centered vertically, or change on rotate. I think centering the div vertically is the best option, so what css would i use?
Currently i have tried:
.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}
But that doesn't work, so maybe it should only be centered after rotating?
Any ideas?
Try following CSS :
.center {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
you can also follow the link of stack-overflow : Best way to center a <div> on a page vertically and horizontally?
If you know the height:
div.centered{
height: 100px;
top: 50%;
margin-top: -50px;
}
Optional: position: absolute | relative | fixed depending on what you want to achieve
the margin-top should always be 0 - half of the height of your div to center.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to center div horizontally and vertically
I need to put image in center of html page, both vertical and horizontal ... been trying few stuff but seems to work fine. To get horizontal alignment I used
<body style="text-align:center">
and it works fine, but what do with vertical alignment?
regards
If:
X is image width,
Y is image height,
then:
img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
But keep in mind this solution is valid only if the only element on your site will be this image. I suppose that's the case here.
Using this method gives you the benefit of fluidity. It won't matter how big (or small) someone's screen is. The image will always stay in the middle.
Put your image in a container div then use the following CSS (changing the dimensions to suit your image.
.imageContainer{
position: absolute;
width: 100px; /*the image width*/
height: 100px; /*the image height*/
left: 50%;
top: 50%;
margin-left: -50px; /*half the image width*/
margin-top: -50px; /*half the image height*/
}
Hey now you can give to body background image
and set the background-position:center center;
as like this
body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
There are a number of different options, based on what exactly the effect you're going for is. Chris Coyier did a piece on just this way back when. Worth a read:
http://css-tricks.com/perfect-full-page-background-image/
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I have a img in floated div and I don't know how to center it vertically.
<div style="height: 300px">
<img style="height: 50px" src="something" />
</div>
vertical-align: middle of course doesn't work.
http://jsfiddle.net/wKQYj/
To vertically-align text within a parent element, and bear in mind that an img is an inline-element and so behaves similarly to text, you can simply set the line-height to the height of the parent element:
div {
height: 300px;
line-height: 300px;
}
JS Fiddle demo.
The vertical-align CSS style specifies the alignment of text within its text row. This allows you to specify text as superscript or subscript, for example.
So it isn't actually intended to vertically align an element within a box.
There is an explicit exception to this, however -- table cells (ie <td> and <th> elements) use the vertical-align style to do exactly that: align the contents of the cell within the cell.
This exception is something of a quirk - it really shouldn't exist. The CSS designers put it in there in order to allow CSS to reproduce the valign attribute of table elements, which was commonly used by designers in the dark-old days of table-based layouts.
For other elements, aligning the contents of a box vertically in the middle of the it can be a bit of a fine art. There are several techniques:
For single lines of text, simply make the line-height the same as the height of the entire box. You probably won't even need vertical-align for this.
Use display:table-cell; to make the element simulate a table cell, and then use vertical-align. This works, but may have unintended consequences (there are other attributes of table cells that you may not want to simulate).
If you know the height of the element you want to vertically align, you can position it to 50% minus half its height, like this:
position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */
There are a few others, but these should get you started.
Hope that helps.
For a more modern (IE8+) solution that doesn't use tables, I like this one best.
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
Use the translate property, it's simple and works even in IE:
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
vertical-align property is only truly good on td elements. Try something like:
<table>
<tr>
<td style='height:300px; vertical-align:center'>
<img src='something'>
</td>
</tr>
</table>
OR since you know the height and width of the img:
<div style='height:300px;'>
<img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>
Pretty cool and modern approach (with height specified):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I'm using the display:box property:
#container {
display: box;
box-orient: vertical;
box-pack: center;
}
#text {
vertical-align: middle;
}
See the js-fiddle here: verical align js-fiddle
Javascript would probably be the best best to get the image centered in the vertical center for every case. if you can use a library like jQuery it's just a few lines of code.
$(function(){
var containerHeight = $('#container').outerHeight();
var imgHeight = $('#logo img').outerHeight();
var difference = (containerHeight - imgHeight)/2;
$('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});
});
I'm using flex for centering an element. It is effective at making the page more responsive.
div {
display: flex;
align-items: center;
}
Please have a look here to learn how to center vertically.