I have the following jsfiddle I am trying to get the pictures of the cats inside the black box to align perfectly in the center and middle so that there is a black border around the image if it does not fit perfectly inside the container. I have tried a few different methods using line-height:100px with a vertical-align:middle also text-align:middle but none seem to be working.
In these scenarios, when the width/height of the containing element is known, I use position absolute and margin auto. Give the containing element relative position and make the image absolute. margin: auto will force the image to display in the absolute center.
.photoContainer img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
see the fiddle http://jsfiddle.net/Pv8uN/1/
Or if you do not want to position absolute, try this :
.content{
display:inline-block;
width:750px;
margin-top:10px;
margin-bottom:10px;
height:auto;
background-color:orange;
}
.photoContainer {
width:200px;
height:200px;
background-color:#000000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content img {
max-width:200px;
max-height:200px;
vertical-align: middle;
}
see the fiddle : http://jsfiddle.net/aAMJS/
Without absolute positioning.
Check out this Working Fiddle
ADD text-align: center; to .photoContainer
.photoContainer:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
and ADD vertical-align: middle; to .photoContainer img
Related
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
I have an issue with elements. When I type any text in any place inside search_groups_wrapper, the right colum fall to the bottom. If there is no text, it is displayed as should be. What is the problem?
Here is jsfiddle - http://jsfiddle.net/csYU8/ with problem. Remove 'Here is some text' and element will move top.
I can't find what causes this but I found a solution:
Just add the styles below to your #search_wrapper
top:0;
position:absolute;
CSS
#search_wrapper
{
height:50px;
width:100%;
top:0;
position:absolute;
}
DEMO
Add align: left to your search_groups_wrapper and existing_groups_wrapper.
FIDDLE DEMO
instead of using display:inline-block you should use float:left property. and to clear the float you can use clear:left on parent div.
or you want to still use the display: inline-block.
#search_groups_wrapper
{
display:inline-block;
height:100%;
margin:0;
padding:0;
border:0;
width:70%;
position:relative;
top:0;
vertical-align:top; /*I've just added this line*/
}
Here is the another working Demo . http://jsfiddle.net/kheema/csYU8/7/
#search_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
position: relative;
top: 0;
width: 70%;
}
#existing_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
width: 30%;
}
Here is a Demo. http://jsfiddle.net/csYU8/
How do you center an image with text inside a block?
I know you can center a block inside another block by giving the latter a fixed width and margin: auto. However, I don't know the dimensions of text beforehand (actual text content may vary).
The CSS I have got so far:
.outer {
width: 400px;
}
.outer table {
border: 0;
width: 100%;
}
.outer table td {
vertical-align: middle;
text-align: center;
}
.outer table td p {
text-align: left;
}
Please take a look at this DEMO
Here is my css:
.block {
text-align: center;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
.left {
float: left;
}
Explanation about :before element:
This is an invisible element pseudo element, which is used for better vertical centering: it emulates a 0-sized inline-block element, which, in conjunction with normal inline-block element (.centered) allows us to use vertical-align.
UPDATE:
You can set height to .block to see how it will be centered vertically:
http://jsfiddle.net/jb5EJ/5/
UPDATE 2: Is this closer: http://jsfiddle.net/jb5EJ/13/
Checkout this link. I hope you will get the solution.
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
TLDR: with only this CSS you can position an element in absolute center (both horizontally and vertically):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Add vertical-align:middle; to img too....also, i would suggest to add height to outer class
<img src="some_src" style="vertical-align:middle;" /> I have some text too
demo to get u started
Is there any alternative to vertical-align?
For using vertical align I am having to set the display to table-cell. When I have the display set to table-cell the height of the div that I have set does not work. I have overflow-y set to auto on that div. What I am trying to do is align the content inside the div from the bottom of that div... I am not able to do that.. Any alternatives?
This is what I have right now:
#container{
height:375px;
border:1px solid #000;
position:relative;
overflow-y:auto;
display:table-cell;
vertical-align:bottom;
}
#container > div{
margin:0;
margin-bottom:5px;
width:660px;
position:relative;
}
There are 2 alternatives, one is to set line-height.. and other one is to set the parent element to position: relative; and than set your child element to position: absolute; and later, use top: 50%; and left: 50%; and than deduct the margins which will be 1/2 of the total height and width of the absolute element itself...
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Assuming height of the element is 200 */
margin-left: -200px; /* Assuming width of the element is 400 */
}
Here's a catch though, using absolute will require fixed dimensions of the element you are trying to align vertically center
Vertical Aligning an element using display: table-cell;
Demo
.parent {
height: 200px;
background: #eee;
display: table-cell;
width: 300px;
vertical-align: bottom;
}
.child {
height: 20px;
background: #aaa;
}
Also it would be better if you use display: table; as a wrapping element.
try this:
#container{
height:375px;
line-height:375px;
}
#container > div{
display:inline-block;
line-height:1;
}
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.