This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 9 years ago.
I'm trying to vertical align my ing element within a div. Only problem is the img element doesn't have a fixed height. I tried vertical-align in combination with table, table-cell and inline-block and inline. None of this seems to work. Does anyone have any idea how I can achieve this? I made a JSFiddle that recreates my problem.
JsFiddle: http://jsfiddle.net/6gMcK/1/
HTML:
<div id="image-container">
<img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg">
</div>
CSS:
#image-container {
padding:5px;
height: 135px;
border: 1px solid black;
display: table;
float:left;
}
#image-container img{
display: table-cell;
max-height:125px;
vertical-align: middle;
}
Change some properties as like this
#image-container {
padding: 5px;
height: 135px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}
#image-container img{
max-height: 125px;
display: block;
}
Live Demo
A solution I often use is to have the image be the background of the image container. This way I can set the width and height to whatever it needs to be and for any image and size of the container, with a little absolute positioning and the full image is always displayed.
#image-container {
position:absolute;
left:30%;
right:30%;
min-width:135px;
height: 135px;
border: 1px solid black;
background-image:url('image.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Of course you can always play around with the values for the width depending on what your needs are. I always found this to be a simple solution for displaying images.
If you just have one image in the container , and the container has a fixed height, then you could simply apply line-height = container_height_px to the container
Try this demo
Related
I'm working with a div that's only holding text. It's using absolute positioning to center itself on top of an image div that is using relative positioning . I can center the div horizontally in CSS if I use
div {
text-align:center;
width:100%;
}
But when I try to center it vertically using
div {
text-align:center;
height:100%;
}
it doesn't vertically center. I'm guessing this is because text-align:center only specifies horizontally.. How could I get around this? I've seen a couple solutions that would work if the outer div is a fixed size, but the outer div is not a fixed size. It's fluid so I need this to work fluidly as well. I've tried using top:50% but I want it perfectly centered... I'm pretty inexperienced so go easy on me
As you guessed, you are right, text-align: center; is used to align the text/element horizontally only and not vertically... so if you are talking about aligning the single line text vertically than you need to use line-height, which will be equal to the container height
Demo
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
line-height: 100px;
text-align: center; /* Forgot this in the demo */
}
Where as if you are looking to vertical align entire element, than you can use either position: absolute; which I won't suggest you, instead use display: table-cell; nested inside display: table; parent
Demo 2
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Try this...
div { position:absolute; top:50%; }
and go through
http://phrogz.net/CSS/vertical-align/index.html
Try this one. Make the code as
div { text-align:center; line-height:100%; }
I have logo and logo name as text to display. Please see the image below to understand my problem clearly.
Most tips and answers found are using absolute positioning but this doesnt match my requirements.
div class boxes:
Yellow: container , Green: for logo, blue: logo text or logo name as text
All the correct display to achieve are found on the right side of the sample div layout image above.
Problem Summary:
Everything will be working fine if both div(logo and logo text) are floated left BUT the only problem is its floated on top. How will I display the "logo text" at the bottom of the "container"?
Is this possible without positioning the "logo text" to absolute?
For now the div container, logo, and logo text classes are floated left.
I think display: inline-block with vertical-align: bottom; gets you where you want to be;
<div class=logo>logo</div>
<div class=name>name</div>
.logo {
display: inline-block;
vertical-align: bottom;
width: 200px;
height: 200px;
background-color: red;
}
.name {
display: inline-block;
vertical-align: bttom;
width: 300px;
height: 50px;
background-color: blue;
}
Here it is in action: http://jsfiddle.net/hajpoj/CDBHT/
Resize the result window to see the effect.
DEMO
Making your child div's inline-block is the solution. Also you will need to give a max-width and min-height attributes to your container so that it re-sizes to fit your contents. See this solution-
HTML-
<div id="con">
<div id="lo"></div>
<div id="tex"></div>
</div>
CSS-
#con
{
max-width:310px;
min-height:140px;
background:yellow;
border: 1px solid aqua;
}
#lo
{
width:140px;
height:140px;
background:green;
display:inline-block;
vertical-align:bottom;
}
#tex
{
width:160px;
height:60px;
background:orange;
display:inline-block;
vertical-align: bottom;
}
I have a container which is 100px by 100px. I have put an image in it which I don't know the dimensions, except the fact that I have set the width to 100px. I would like to find a way in CSS to vertically align this image middle in it's container. I have stuck overflow:hidden on the container to prevent it from showing anything outside the square.
I have found something on here on how to do the opposite (width, not height).
Wrap the image inside two divs that will mimic an html table. The outer div will have display: table property, and the inner will have display: table-cell property. You can set the vertical-align property of the inner div to be top, middle, or bottom.
HTML:
<div class="table">
<div class="table-cell middle">
<img src="https://www.google.ca/images/srpr/logo3w.png" alt="" />
</div>
</div>
CSS:
.table {
display: table;
width: 100px;
height: 100px;
border: 1px solid blue;
}
.table-cell {
display: table-cell;
}
.middle {
vertical-align: middle;
}
img {
width: 100%;
outline: 1px solid red;
}
Here's the fiddle.
You would need to know the height of the image to vertically align it as you would then use this CSS:
div {
position:relative;
overflow:hidden;
}
div img {
position:absolute;
top:50%;
margin-top:-XXXpx /*(where XXX px is half the height of the image)*/
}
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/
Why is the text in this example: http://jsfiddle.net/7EYZe/ not in the vertical center?
How can I middle the text?
EDIT:
Now I have two or more lines of text:
http://jsfiddle.net/7EYZe/12/
How can I display this properly?
The following css will center text in a div by using padding instead of height:
.centerText
{
padding: 90px 0;
font-size: 18px;
border:solid 1px #000;
}
That's an incorrect use of vertical-align. It doesn't know what object to vertically align itself to.
Here is one dynamic, table-less solution: http://jsfiddle.net/imoda/7EYZe/14/
<style type="text/css">
div {
height:200px;
width:200px;
border:solid 1px black;
}
.aligner {
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<span class="aligner"></span>
<span class="align">blabla</span>
</div>
Add text-align: center; and display: table-cell; to center it in middle of the box.
div {
height:200px;
width:200px;
border:solid 1px black;
text-align: center;
vertical-align:middle;
display: table-cell;
}
The div is vertically aligned within whatever surrounds it. That doesn't affect what's inside. Make it smaller, in fact remove the width, and put it inside something bigger.
The thing is, vertical-align was mainly designed for specifying the behaviour of table-cells. Although the name suggests that any content shall be aligned in the middle, it simply does not.
You can find a very good article here about what vertical-align really is and how to achieve your intended purpose - aligning the text vertically inside your div.
Use line-height:200px, e.g.
div {
border:solid 1px black;
height:200px;
line-height:200px;
width:200px;
}
Also, in your example, you won't need vertical-align:middle. That style means that the div will be vertically aligned to its parent element. It doesn't mean the text inside will be vertically aligned.
This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }