I have a div with image "image.jpg".
By using text-align=center, the image is being centered horizontally.
However it's not vertically aligned. How would I implement the vertical alignment?
<div style="vertical-align: middle;text-align:center;">
<img title="Title3" src="image.jpg" style="display: inline;" id="idImage">
</div>
Use the vertical-align property as described in this article. Note that in order to get vertical-align to work you need to do display: table-cell as well.
div.centered {
display: table-cell;
vertical-align: middle;
text-align: center;
/* other styling */
}
Where I've given your <div> the class name of centered.
Also you shouldn't use text-align for centering, but instead add margin: 0 auto; to the image styling.
EDIT
HTML:
<div class="centered">
<img src="..." class="centered-image" />
</div>
CSS:
div.centered {
display: table-cell;
vertical-align: middle;
}
img.centered-image {
margin: 0 auto;
}
If you set the height of the parent container and set your margin-top: auto, it should align to the middle I think. This works with horizontally aligning, but I haven't tried with vertical. Anyways, it would avoid absolute positioning
As mentioned before, you can also use javascript to find the height, then set the margin, something like this:
var image = document.getElementById("myImage");
var imgHeight = image.style.height;
image.style.marginTop = -(imgHeight/2);
image.style.top = 50%; //you can probably just set this in css and omit this line
you must of course set
#myImage{
position: absolute;
}
though
You have to know the dimensions for this to work (or use javascript to get the dimensions if you'll have different ones). This will also center the image horizontally (so you don't need your text-align=center )
Taken from css-tricks
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
height and width are that of the image in question and the top and left margins are set at half the respective height and width.
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.
This question already has answers here:
Centering images in a div vertically
(3 answers)
Closed 9 years ago.
I have two columns in my HTML page.
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
Each of them occupies half of the page
#left {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
I want to center a picture in the right column. I know that I can make it horizontally centered by doing margin-left: auto; margin-right: auto;. How can I make it vertically centered?
The first issue I see is that there is no height specified for the height of the left and right divs; height should be set to 100% or any value to your liking. To vertically center the image, we can use absolute-positioning. We would set the dimensions for the image (which is good practice in any case) and then set the top:50% and left:50% attributes. This would push the image outside the box though, so we add negative margins that are half the width and height of the image. This will vertically and horizontally align the image in a div every time!
Here's the updated CSS:
#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}
Take a look at this JSFiddle: http://jsfiddle.net/bYF7F/2/.
I know this question has been marked as answered, but you did mention that the height and width on the image was not ideal. So i would like to suggest another solution.
Add:
display: -webkit-flex;
display: flex;
to the right div, and:
margin: auto;
to the image. I think this is what you were after. See fiddle http://jsfiddle.net/Fqa7b/
If you use a TABLE instead of a DIV it will center automatically.
As of now, I can horizontally center the image, but once I try to vertically center it (adding top-margin), the parent div also moves down as well (which is what I don't want).
Here is an image of what I am talking about: Screenshot
I think the best option would be to set it to an absolute position, but then I am having issues horizontally centering it.
<div id="header">
<div id="container">
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
</div>
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#logo {
height: 96px;
width: 484px;
margin: 50px auto;
}
Help would be greatly appreciated! Thank you
You could put overflow: hidden on the #container. It will introduce a new block formatting context, so the margins are not collapsed anymore.
jsFiddle Demo
The magic of overflow: hidden
Can overflow:hidden affect layout?
From what I see, the container is not going lower (nor it shouldn't), it's just the logo (due to the margin) that it's going lower.
Where do you want to center the image, on the header?
Give the header a fixed height and use margin or padding to center your image.
If the header's height needs to be fluid, then you could go with
#container {
width: 960px;
margin: 0 auto;
position: relative;
vertical-align: middle;
display: table-cell
}
hope that helps!
R
I have a small problem but I can't get it solved.
I have a content header of 864px width, a background image repeated-y and footer image.
Now I have this <div> over the background image and I want it to be like 855px width and the text align left but yet aligned center so it fits in the bg.
I once had it oke width some padding left but I figured out that was the correct padding for my screen resolution.
Soo briefly it is:
Setting a div width - align the div center - align its text (content) left.
Set auto margins on the inner div:
<div id="header" style="width:864px;">
<div id="centered" style="margin: 0 auto; width:855px;"></div>
</div>
Alternatively, text align center the parent, and force text align left on the inner div:
<div id="header" style="width:864px;text-align: center;">
<div id="centered" style="text-align: left; width:855px;"></div>
</div>
Try:
#your_div_id {
width: 855px;
margin:0 auto;
text-align: center;
}
Use auto margins.
div {
margin-left: auto;
margin-right: auto;
width: NNNpx;
/* NOTE: Only works for non-floated block elements */
display: block;
float: none;
}
Further reading at SimpleBits CSS Centering 101
All of these answers should suffice.
However if you don't have a defined width, auto margins will not work.
I have found this nifty little trick to centre some of the more stubborn elements (Particularly images).
.div {
position: absolute;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
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.