This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
I have a div which is with absolute position (width/height are 100%).
Notice, not px, percents.
Inside this div I have an image. How do I center this image in this div?
CSS:
/* where margin-left = {img width}/2, and margin-top= {img height}/2 */
.bigdiv {
width:100%;
height:100%;
position:absolute;
}
.bigdiv img {
position:absolute;
left:50%;
top:50%;
margin-left:-10px;
margin-top:-10px;
}
HTML:
<div class="bigdiv"><img src="eg.png" /></div>
You could also put your margin-left, margin-top commands as a style on the img tag instead (since they're unique per image).
Related
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 6 years ago.
I have an h3 with a height of 100%. Therefore the height is unknown. How can I center the text within itself? For the sake of the example, I have given the parent fixed dimensions but this is not the case. I have tried using vertical align but that doesn't work, I believe I may need to change the display to do that?
I don't want to center the text within its parent, I know various methods to do this. I want to know if it is possible to vertically center it within itself. The text needs to be 100% in both dimensions so that the link fills the parent div.
.unknowndimensions{
height:300px;
width:300px;
}
.unknowndimensions h3{
height:100%;
width:100%;
background:#f7f700;
text-align:center;
}
<div class="unknowndimensions">
<h3>Title</h3>
</div>
Using table method,
.unknowndimensions{
height:300px;
width:300px;
}
.unknowndimensions a{
display:table;
width:100%;
height:100%;
}
.unknowndimensions h3{
display:table-cell;
vertical-align:middle;
background:#f7f700;
text-align:center;
}
<div class="unknowndimensions">
<h3>Title</h3>
</div>
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 7 years ago.
I am wondering how can I set line-height to be always equal to height of the container div - in order to center the element inside of the container in the middle of the height of the container.
Lets say I have a following:
<div style="height:12%">
<i style="line-height:??"></i>
</div>
How can I set line height, so that it changes with the changes when the height of the container div changes?
Thanks uksz
You put another inline-level element on the same line with a height equal to 100% of the container. It's most common to use display:inline-block; here, but any inline-level element to which height applies, such as inline-table, inline-flex or a replaced inline element will work just as well.
e.g div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
html, body { height: 900px; }
div { border:1px solid black; height: 12%; }
div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
<div>
<i>My text</i>
</div>
The intuitive way would be to set the line-height to 100%, but that actually just sets the line height to 100% size of the font
Assuming you probably want to center your text, try this
.container {
position:relative;
}
.center {
position:absolute;
top:0; left:0; bottom:0; right:0;
margin: auto;
/* for horiz left-align, try "margin: auto auto auto 0" */
}
This question already has answers here:
Position: absolute and parent height?
(8 answers)
Closed 8 years ago.
I have an image with absolute position image inside div tag. What i want to resize the div tag according to image if i resize the browser. My code are here:-
CSS
#parent{
width:225px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
position:absolute;
}
HTML
<div id="parent">
<img src="images/photo1.jpg" />
</div>
Actually div tag border doesn't containing an image which is absolute positioned.
Please help.
Your question is not well worded. But maybe you need something like this?:
#parent{
width:100%;
max-width:250px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
max-width:100%;
}
are you sure you need it absolute?
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
Is there an easy way to achieve this without hacks or javascript?
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
html, body {
height: 100%;
}
Do you want this type of design ? => Example Fiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
I am trying to make an image gallery on my website,
but I cannot center the image inside the div.
The CSS for the div is:
#animation
{
display : none;
position: absolute;
z-index:1;
background : rgba(0,0,0,0.7);
height: 100%;
width: 100%;
border: 0px;
}
And the image id is:
#pictures
{
...
}
One way to do it is a table cell display and vertical align: middle;
Fiddle
margin:auto; add autommatic margin and center the image have a try, but I need more code , could you post it?
margin:auto;
it will automatically center your div by adding equal margin to the left and right of your div block element
Check out these resources:
If you know the width of the div - How to make an image center (vertically & horizontally) inside a bigger div
If you don't know the width of the div - http://doctype.com/css-centering-wide-image-unspecified-dimensions-div-unspecified-dimensions
Put your image inside div and center it like this:
Fiddle here
div{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px; //to pull it down
}