This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
Here is what I have right now. In other divs using vertical-align:middleand setting the line-height to the same value as the height property it should work!The only thing is that in those divs I used pixel dimension and not percentages. Can anybody tell me why this wont work with percentages? also setting the text-sizeto 50% should also make text half the size of the div but it is really really small still? What is going on here?
#chooseStateAlabama {
width: 20%;
height: 25%;
top: 0;
left: 0;
position: absolute;
background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
background-size: 100% 200%;
float: left;
color: #FFFFFF;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 50%;
line-height: 25%;
text-align: center;
vertical-align: middle;
}
You can use display:inline-block , height:100% and vertical-align:middle to a single element or pseudo element aside the text (before or after): DEMO
#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
If you happen to have more content or more than 1 line, then use an element to wrap it as well and apply to it display and vertical-align. DEMO2 to see behavior
If you can alter the markup you can use quite a few ways to get the result you want.
http://jsfiddle.net/vvpn6cge/
Because you have text ( that could be one or many lines long I guess) then you could get the result using CSS table cells (see the fiddle).
.outer-container {
display: table;
width: 100%;
}
.txt-vertical-align {
display: table-cell;
text-align: center;
vertical-align: middle;
}
As a further alternative, you might use flexbox
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
(stolen from this stackoverflow question)
http://jsfiddle.net/L85h8vvj/7/
HTML
<body>
<div class='container4'>
<div>Example :)</div>
</div>
</body>
CSS
body{
margin:0px;
}
div.container4 {
height: 100%;
width:100%;
position: absolute;
}
div.container4 div {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50-%;
transform: translate(-50%, -50%)
}
I've centered my text in my div but I've only managed to center it horizontally by using text-align: center
However I'm having trouble centering the text vertically. I've tried using vertical-align: middle; but it didn't work
Here is a codepen: http://codepen.io/anon/pen/Ioiaq
the code with the text is right at the bottom of the html panel the text is "INFO"
and here's the code so far:
<div id="inf" style="
text-align:center;
background-color: white;
position: absolute; top:50%; left: 45%; width: 10%; height: 6%;
z-index: 10;
display: inline-block;">
<span>INFO</span>
</div>
any ideas?
I don't mind what code is used to fix the alignment it doesn't have to be css.
To center a single line vertically, you can use CSS line-height whith the same value as the height value you are using.
line-height with a vertical-align: middle; is probably the best way to go if you aren't using JS.
FIDDLE
HTML:
<div id="inf">
<span>INFO</span>
</div>
CSS:
#inf {
text-align:center;
background-color: white;
z-index: 10;
display: inline-block;
width: 100%;
line-height: 400px;
vertical-align: middle;
}
You could use the CSS property vertical-align.
vertical-align: middle;
i have a problem with aligning.
This is my code.
Html:
<div id="alt">
<p>this is a sample text</p>
</div>
Css:
#alt{
display:block; position: absolute; top: 400px; left:500px; }
on using code everything looks fine. But when I reduce the zoom level of the browser. Its goes to the left. I want it to remain in the centre. Help me in solving this.
For aligning website content to center,you have to put all content in one div say main div and apply a below css to it
.main
{
margin-left:auto;
margin-right:auto;
width:960px;
}
use left:50% instead of left:500px;
css:
#alt{
display:block; position: absolute; top: 400px; left:50%; }
If your container div has a fixed width then use margin: 0 auto;
Fiddle: http://jsfiddle.net/X6Vxq/show
Try the following style.
#alt
{
display:block;
text-align: center;
top: 400px;
left:500px;
}
#alt p
{
margin: 0 auto;
display: inline-block;
}
If your content is present in a div, then you can give the position relative to the div and margin left and right to auto. Check the following code:
#alt {
position: relative;
margin-left: auto;
margin-right: auto;
}
This is a hard one to answer, since you don't seem to have given us enough info. Would you like the paragraph center justified or left-justified in a centered column?
To center justify, you can simply use:
#alt { text-align: center }
To create a centered block with the text left justified, use:
#alt {
width: 800px; /* Your desired width of the center block */
margin: 0 auto;
}
Hope this helps
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How do I center an image if it's wider than its container?
(10 answers)
Closed 3 years ago.
I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.
How can it be done?
I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..
Working in old browsers (IE >= 8)
Absolute position in combination with automatic margin permits to center an element horizontally and vertically. The element position could be based on a parent element position using relative positioning. View Result
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Personally, I'd place it as the background image within the div, the CSS for that being:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)
Let the browser take the strain.
another way is to create a table with valign, of course. This would work regardless of you knowing the div's height or not.
<div>
<table width="100%" height="100%" align="center" valign="center">
<tr><td>
<img src="foo.jpg" alt="foo" />
</td></tr>
</table>
</div>
but you should always stick to just css whenever possible.
I would set your larger div with position:relative; then for your image do this:
img.classname{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.
EDIT: Note... your margins are negative half of the size of the image.
This works correctly:
display: block;
margin-left: auto;
margin-right: auto
else try this if the above only gives you horizontal centering:
.outerContainer {
position: relative;
}
.innerContainer {
width: 50px; //your image/element width here
height: 50px; //your image/element height here
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Use Flexbox:
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center; /* Centering y-axis */
align-items :center; /* Centering x-axis */
}
here's another method to center everything within anything.
Working Fiddle
HTML: (simple as ever)
<div class="Container">
<div class="Content"> /*this can be an img, span, or everything else*/
I'm the Content
</div>
</div>
CSS:
.Container
{
text-align: center;
}
.Container:before
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
Benefits
The Container and Content height are unknown.
Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, also Works great with CSS transitions.
This is coming a bit late, but here's a solution I use to vertical align elements within a parent div.
This is useful for when you know the size of the container div, but not that of the contained image. (this is frequently the case when working with lightboxes or image carousels).
Here's the styling you should try:
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
I've found that Valamas' and Lepu's answers above are the most straightforward answers that deal with images of unknown size, or of known size that you'd rather not hard-code into your CSS. I just have a few small tweaks: remove irrelevant styles, size it to 200px to match the question, and add max-height/max-width to handle images that may be too large.
div.image-thumbnail
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
in the div
style="text-align:center; line-height:200px"
We can easily achieve this using flex. no need for background-image.
<!DOCTYPE html>
<html>
<head>
<style>
#image-wrapper{
width:500px;
height:500px;
border:1px solid #333;
display:flex;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>
</body>
</html>
Vertical-align is one of the most misused css styles. It doesn't work how you might expect on elements that are not td's or css "display: table-cell".
This is a very good post on the matter. http://phrogz.net/CSS/vertical-align/index.html
The most common methods to acheive what you're looking for are:
padding top/bottom
position absolute
line-height
In CSS do it as:
img
{
display:table-cell;
vertical-align:middle;
margin:auto;
}
#sleepy You can easily do this using the following attributes:
#content {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
#myImage {
display: block;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid yellow;
}
<div id="content">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>
References: W3
Typically, I'll set the line-height to be 200px. Usually does the trick.
I have a gallery of images for which I don't know the exact heights or widths of images beforhand, I just know that they are smaller than the div in which they are going to be contained.
By doing a combination of line-height settings on the container and using vertical-align:middle on the image element, I finally got it to work on FF 3.5, Safari 4.0 and IE7.0 using the following HTML markup and the following CSS.
The HTML Markup
<div id="gallery">
<div class="painting">
<a href="Painting/Details/2">
<img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
</a>
</div>
<div class="painting">
...
</div>
...
</div>
The CSS
div.painting
{
float:left;
height:138px; /* fixed dimensions */
width: 138px;
border: solid 1px white;
background-color:#F5F5F5;
line-height:138px;
text-align:center;
}
div.painting a img
{
border:none;
vertical-align:middle;
}
This works for me :
<body>
<table id="table-foo">
<tr><td>
<img src="foo.png" />
</td></tr>
</table>
</body>
<style type="text/css">
html, body {
height: 100%;
}
#table-foo {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#table-foo img {
display: block;
margin: 0 auto;
}
</style>
Another way (not mentioned here yet) is with Flexbox.
Just set the following rules on the container div:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
FIDDLE
div {
width: 200px;
height: 200px;
border: 1px solid green;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
<div>
<img src="http://lorempixel.com/50/50/food" alt="" />
</div>
A good place to start with Flexbox to see some of it's features and get syntax for maximum browser support is flexyboxes
Also, browser support nowadays is quite good: caniuse
For cross-browser compatibility for display: flex and align-items, you can use the following:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
This is an old solution but browser market shares have advanced enough that you may be able to get by without the IE hack part of it if you are not concerned about degrading for IE7. This works when you know the dimensions of the outer container but may or may not know the dimensions of the inner image.
.parent {
display: table;
height: 200px; /* can be percentages, too, like 100% */
width: 200px; /* can be percentages, too, like 100% */
}
.child {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
}
<div class="parent">
<div class="child">
<img src="foo.png" alt="bar" />
</div>
</div>
easy
img {
transform: translate(50%,50%);
}
You can set position of image is align center horizontal by this
#imageId {
display: block;
margin-left: auto;
margin-right:auto;
}
I've been trying to get an image to be centered vertically and horizontally within a circle shape using hmtl and css.
After combining several points from this thread, here's what I came up with: jsFiddle
Here's another example of this within a three column layout: jsFiddle
CSS:
#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}
.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML:
<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
You can center an image horizontally and vertically with the code below (works in IE/FF).
It will put the top edge of the image at exactly 50% of the browser height, and the margin-top(pulling half the height of the image up) will center it perfectly.
<style type="text/css">
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* for explorer only */
</style>
<body style="background-color:#eeeeee">
<div id="middle">
<div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
<img src="..." height="..." width="..." />
</div>
</div>
</body>
I love jumping on old bandwagons!
Here's a 2015 update to this answer. I started using CSS3 transform to do my dirty work for positioning. This allows you to not have to make any extra HTML, you don't have to do math (finding half-widths of things) you can use it on any element!
Here's an example (with fiddle at the end). Your HTML:
<div class="bigDiv">
<div class="smallDiv">
</div>
</div>
With accompanying CSS:
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
What I do a lot these days is I will give a class to things I want centered and just re-use that class every time. For example:
<div class="bigDiv">
<div class="smallDiv centerThis">
</div>
</div>
css
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
}
.centerThis {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
This way, I will always be able to center something in it's container. You just have to make sure that the thing you want centered is in a container that has a position defined.
Here's a fiddle
BTW: This works for centering BIGGER divs inside SMALLER divs as well.
div {
position: absolute;
border: 3px solid green;
width: 200px;
height: 200px;
}
img {
position: relative;
border: 3px solid red;
width: 50px;
height: 50px;
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<div class="center">
<img class="center" src="http://placeholders.org/250/000/fff" />
</div>
Related: Center a image
thanks to everyone else for the clues.
I used this method
div.image-thumbnail
{
width: 85px;
height: 85px;
line-height: 85px;
display: inline-block;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
}
Use positioning. The following worked for me:
div{
display:block;
overflow:hidden;
width: 200px;
height: 200px;
position: relative;
}
div img{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
Simply set image margin auto as shown below.
img{
margin:auto;
width:50%;
height:auto;
}
Check these example
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
If you know the size of the parent div and the image, you can just use absolute positioning.