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/
Related
I have a tall INPUT (type=text) element which is sized at 100%. The containing element has a specific height (which is dynamic).
What I want is to be able to put the text at the top of the INPUT element. I've seen a few answers use padding to vertically centre it, but I could not get that to place the text at the top of the element. I'm not able to set the height of the element.
Example HTML (or JSFiddle):
<body>
<div class="outer">
<input type="text" value ="textcontent"></input>
</div>
</body>
and CSS:
body { background-color:gray;}
.outer {
height:480px;
background-color:pink;
margin-top:100px;
}
input {
height:100%;
background-color:lightgray;
padding-top:0px;
line-height:100px;
}
Can this be done without setting the height of the element? Browsers I need to support: Chrome, FF, IE9 & IE11.
Thanks
Dave
If you want to have only input element and achieve this, then set padding-bottom and not height.
Once you set height, by default the text will be shown in the middle of the element.
input {
padding-bottom: 462px;
background-color:lightgreen;
}
http://jsfiddle.net/yf5f82vx/1/
I would recommend you to use the textarea insted of the text input.
That way the text will start from the top and will wrap the text if its have more charactors that the width.
check the below ex
Fiddle example
'<body>
<div class="outer">
<textarea >textcontent</textarea>
</div>
</body>'
'body { background-color:gray;}
.outer {
height:480px;
background-color:pink;
margin-top:100px;
overflow:hidden;
}
textarea {
background-color: lightgray;
border: 1px solid #ccc;
box-sizing: border-box;
height: 100%;
line-height: 50px;
max-height: 100%;
padding-top: 0;
resize: none;
}'
Goal:
A wrapper div that is fixed height and variable width. This wrapper contains a picture, which will have variable height and width (Could be portrait or landscape).
The picture should resize automatically to be either 90% of the wrapper's width or 90% of the wrapper's height, whichever is the smallest. It should also be constantly centered, both horizontally and vertically.
It's somewhat hard to describe via text, so see the manipulated screenshot below for an example of three possible images, when the wrapper is three different possible widths:
What I've Got Now:
I'm using a structure of: div->span->div->img.
I've got the sizing working completely. I've got the horizontal positioning working. I've got the vertical positioning working when the image is constrained by height.
When the image starts to resize smaller (constrained by width), the vertical positioning doesn't work. This is because the inner div isn't resizing.
Code
Working Fiddle
HTML:
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png"></img>
</div>
</span>
</div>
<div class="selected-thumb">
<span>
<div>
<img src="http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg"></img>
</div>
</span>
</div>
CSS:
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
}
.selected-thumb span {
display:block;
height:200px;
}
.selected-thumb span div {
position:relative;
max-height:90%;
max-width:90%;
height:200px;
top:50%;
margin:0 auto;
}
.selected-thumb span div img {
width:auto;
height:auto;
max-height:100%;
max-width:100%;
position:relative;
top:-50%;
}
What I Need:
I need to fix the vertical placement, and I am running into a wall. I've tried using display:table, I've tried creating a pseudo-element and using display:inline-block. I can't find a way to accomplish what I need. All useful info will be upvoted regardless of which I select as correct.
Check this:
html,body {height:100%;}
.selected-thumb {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
height:200px;
line-height: 200px;
}
.selected-thumb img {
display: inline-block;
vertical-align: middle;
width:auto;
height:auto;
max-height:90%;
max-width:90%;
}
fiddle: http://jsfiddle.net/Ts4W9/2/
Why aren't the two boxes floating side-by-side in the following code?
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background: purple;
float:left;
}
.box2{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
jsFiddle describing question.
The float css property removes the element from the regular flow of the page. This means that its position will not be affected by other elements (which are not also floating). For this reason, in your example, the two elements end up on top of each other.
If you assign .box2 the property float:left as well, they will sit next to each other, as I believe you are expecting.
Just a Small Change:
.box2{
width: 300px;
height: 300px;
background: yellow;
float:left;
}
Working Fiddle
The answer given by Will and Jatin are correct but you can also try wrapping both the div`s in a single wrapper div and display both the divs in the same line
Example:
.container
{
display:inline-block;
}
.box1{
width:50px;
height:200px;
background: purple;
float:left;
}
.box2{
width: 50px;
height:200px;
background: yellow;
float:right;
}
JSFiddle
You need to do two things:
1) Wrap the two boxes in a div
2) Add float:left to both the boxes
In this way you need not clear the float for subsequent containers
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
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;
}