This question is based on this answer: https://stackoverflow.com/a/23876839/994141
I read many threads on this subject, and it seemed to me the best answer because I would like to avoid setting a width.
But the content at the center isn't well centered but based on the content on the left and on the right.
Proof: https://jsfiddle.net/p7kfuont/ ('b' is not centered on the first line)
Is there a way to improve this code (inline-block and float) without setting widths?
Is this what you're trying to achieve?
.container {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
text-align: center;
}
.container > div {
display: table-cell;
border: 1px solid red;
}
<div class="container">
<div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="center">b</div>
<div class="right">c</div>
</div>
<div class="container">
<div class="left">a</div>
<div class="center">b</div>
<div class="right">c</div>
</div>
If you want the b to be strictly in the middle you can add this:
.container {
position: relative;
}
.container .center {
position: absolute;
left: 50%;
transform: translateX(-50%); /*add this if you want the element centered*/
-ms-transform: translateX(-50%); /* IE 9 */
-webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
}
the transform: translateX(-50%) will set the center of your element in the center, while without it you will have the left edge of your element in the center.
jsFiddle
Related
Active site can be seen here: http://twoacr.es/
When a .project-panel is hovered, a div fades in over with text in it. I have it set as a table and the content within as table-cell, it works great in Firefox but Chrome seems to ignore the height and puts the type all at the top. I've tried it a number of different ways but Chrome always seems to act up.
Depending on your browser support requirements, there are a number of alternative ways to vertical center without relying on tables.
You can use absolute positioning combined with a transform.
Or you can use flexbox.
h3 {
margin: 0;
}
.box {
height: 100px;
background: pink;
margin: 10px;
text-align: center;
}
.flexbox {
display: flex;
align-items: center;
justify-content: center;
}
.absolute {
position: relative;
}
.absolute > h3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
<div class="container">
<div class="box flexbox">
<h3>Center</h3>
</div>
<div class="box absolute">
<h3>Center</h3>
</div>
</div>
I don't know that my question is much different than the question in the possible duplicate. However, the answer in the possible duplicate does not work (even the jsFiddle provided as the answer does not seem to even rotate the text). The answer on this thread actually solved my problem.
I'm trying to get a div to resize when the text inside is rotated 90 degrees. Right now, the div stays the same width even though the text becomes "thinner" by rotating it.
I've got something like this:
html, body {
height: 100%;
margin:0px;
}
.pane {
width: auto;
float:left;
height: 100%;
border: 1px solid black;
}
.vertical {
display: block;
transform-origin: top right 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<div class="pane"><span class="vertical clearfix">This is text</span></div>
<div class="pane"><span>This is another Pane</span></div>
You can see a sample plunk here.
I'm trying to avoid using hardcoded heights or widths if possible.
when you use transform or position:relative; the initial space used by the element remains the same, it is only drawn different at screen.
Here if you want your rotated box to only use the width of one line height, you need to set this width and let content overflow.
translate can be used to replace content in sight
white-space:nowrap to keep text on a single line
and eventually, because of the rotated value used and the width reduced, you may use direction to push overflow in the opposite direction .
html,
body {
height: 100%;
margin: 0px;
}
.pane {
width: auto;
float: left;
height: 100%;
border: 1px solid black;
}
.vertical {
display: inline-block;
text-align: left;
float: right;
padding-right: 1em;
width: 0.25em;
white-space: nowrap;
direction: rtl;
transform-origin: top left;
transform: rotate(-90deg) translate(-100%);
}
<div class="pane">
<span class="vertical">This is text</span>
</div>
<div class="pane">
<span>This is another Pane</span>
</div>
Else you may use min-width , and a negative margin that virtually reduce elements width to none;
I would go for this one more simple and solid
html,
body {
height: 100%;
margin: 0px;
}
.pane {
width: auto;
min-width:1.2em;
float: left;
height: 100%;
border: 1px solid black;
}
.vertical {
display:inline-block;
padding-right:0.25em;
margin-right:-999px;
transform-origin: top left;
transform: rotate(-90deg) translate(-100%);
}
<div class="pane">
<span class="vertical">This is text</span>
</div>
<div class="pane">
<span>This is another Pane</span>
</div>
<div class="pane">
<span class="vertical">This is some more text</span>
</div>
I have two divs displayed next to each other, left div is 20% width and right is 80% width.
Now left div contains image which is resized horizontally so it's height is unknown and keeps changing.
Now when this div resizes parent height increases or decreases, so when that happens i need my right div to resize as well, how can i do that?
jsFiddle
You can try the CSS3 table-cell value on the display property : http://jsfiddle.net/UJYyw/5/
With
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
You just have to apply a table-cell display on div.one and div.two
.one, .two{
display:table-cell;
}
Compliant browsers will adapt height of elements the way they do on td and th tags.
You could use jQuery to do this.
$('.container').css({'height':$('.one').height()});
See a jsFiddle here
When you change the value of .one in the css, it will update the size of .container, and thus, .two as well.
Here is the crossbrowser solution which uses just floats and couple of wrappers http://jsfiddle.net/RSPbD/
HTML
<div class="container">
<div class="wrap1">
<div class="wrap2">
<div class="one">text in div one</div>
<div class="two">text in div two</div>
<div class="clear"></div>
</div>
</div>
</div>
CSS:
.container{
border:1px solid;
width:70%;
margin:50px;
padding:10px;
}
.wrap1 {
width: 25%;
background: red;
position: relative;
left: 7%;
}
.wrap2 {
width: 200%;
position: relative;
left: 100%;
margin:0 -200% 0 0;
background: blue;
}
.one{
float: left;
width: 50%;
margin-right: -100%;
position: relative;
left: -50%;
}
.two {
}
.clear {
clear: both;
font-size: 0;
overflow: hidden;
}
I have a div with an inline-block display so that it wrapps nicely its content. What I am trying to do is to center that div horizontally and vertically using the different technics I already used, the one I read on posts, but nothing working. Hope someone can help. Thank you in advance for your replies. Cheers. Marc..
http://jsfiddle.net/DfDLF/
my html:
<div>
<input type='text'>
<input type='text'>
<input type="submit">
</div>
my css:
div{
display:inline-block;
padding:5px;
background:grey;
top:50%;
margin-left:auto;
margin-right:auto;}
div {
height: 100px; /* specify width */
width: 400px; /* specify height */
position: absolute; /* position to absolute */
top: 50%; /* push top 50% */
left: 50%; /* push left 50% */
margin-top: -50px; /* set margin top to minus half height */
margin-left: -200px; /* set margin left to minus half width */
/* your styles.. */
padding: 5px;
background: grey;
}
Set your CSS to this.
you cannot center Inline-Block using margin:auto because of its inline behaviour.
So you can just use the following body{text-align:center;} and your div will center nicely
CSS
#vertical_align {
height: 800px; /* need */
width:100%;
display: table;
border:1px solid;
#position: relative;
overflow: hidden;
}
#vertical_align .container {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#vertical_align .container .wrap {
#position: relative;
width: 100%;
border:1px solid;
#top: -50%;
}
HTML
<div id="vertical_align">
<div class="container">
<div class="wrap">
<center>
Your content
</center>
</div>
</div>
</div>
Here is one option: http://jsfiddle.net/DfDLF/24/
With CSS 3, are there any way to vertically align an block element? Do you have an example?
Thank you.
Was looking at this problem recently, and tried:
HTML:
<body>
<div id="my-div"></div>
</body>
CSS:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Here's the Fiddle:
http://jsfiddle.net/sTcp9/6/
It even works when using "width/height: auto", in the place of fixed dimensions.
Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).
Note: This example uses the draft version of the Flexible Box Layout Module. It has been superseded by the incompatible modern specification.
Center the child elements of a div box by using the box-align and box-pack properties together.
Example:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Using Flexbox:
<style>
.container {
display: flex;
align-items: center; /* Vertical align */
justify-content: center; /* Horizontal align */
}
</style>
<div class="container">
<div class="block"></div>
</div>
Centers block inside container vertically (and horizontally).
Browser support: http://caniuse.com/flexbox
a couple ways:
1. Absolute positioning-- you need to have a declared height to make this work:
<div>
<div class='center'>Hey</div>
</div>
div {height: 100%; width: 100%; position: relative}
div.center {
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
}
*2. Use display: table http://jsfiddle.net/B7CpL/2/ *
<div>
<img src="/img.png" />
<div class="text">text centered with image</div>
</div>
div {
display: table;
vertical-align: middle
}
div img,
div.text {
display: table-cell;
vertical-align: middle
}
A more detailed tutorial using display: table
http://css-tricks.com/vertically-center-multi-lined-text/
There is a simple way to align vertically and horizontally a div in css.
Just put a height to your div and apply this style
.hv-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Hope this helped.
I always using tutorial from this article to center things. It's great
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
The essential rules are:
Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
Try this also work perfectly:
html:
<body>
<div id="my-div"></div>
</body>
css:
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
display: table-cell;
vertical-align: middle
}
You can vertically align by setting an element to display: inline-block, then setting vertical-align: middle;