div centered over img
- Started
- Last post
- 9 Responses
- orpkoobcam2
we're talking html + css: how do you put a nice little div box with some text etc centrally both horizontally and vertically over an image, who's height is dynamic?
I can get it to centre align horizontally with:
margin-left: auto;
margin-right: auto;but not vertically with:
margin-top: auto;
margin-bottom: auto;
- brandelec0
- nearly, but i know the height of the inner box and not the outer box.orpkoobcam2
- ETM0
margin-top: 50%;
margin-bottom: 50%;??
- monNom0
tables
- Al_dizzle0
top:50%; ...?
- DragKng0
Wrap both the div with the text in it AND the image in another DIV, then center the image inside that box.
holderDiv.textDiv { margin: 0 auto; OR text-align: center;}
Think both of these should work
- estetic0
Wrap the image and text box in a relatively positioned left floated div.
Position the text box absolutely with a set width and height. Top:50%, left:50% - with top and left margins half the height and width -
.wrapper {
position:relative;
float:left;
}p {
position:absolute;
top:50%;
left:50%;
width:100px;
height:50px;
margin: -25px 0 0 -50px;
}- I find this to be the most reliable way to vertical centre, as long as you've got set height.Nathan_Adams
- but margin: 0 auto works great for horizontal centre.Nathan_Adams
- orpkoobcam20
found this to work:
http://www.red-team-design.com/c…div.my-element
{
display: table;
margin: 0 auto;
}
- 74LEO0
::BUMP::
Anyone have an example of a close/hide graphic button for an already showing div tag?Thanks all!