I have a problem. I want to achieve something like this:
I have a div with fixed height, and 2 other divs inside, with variable / unknown height, which I want to have
a) vertically centered
b) floating left /right
Right now I am trying something like this.
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
Everything is perfectly centered, but the right div is next to the left one, and not on the right side. As soon as I start to put in
float: right;
into my right class, it is on the right side, but not centered anymore. And I have no clue how to achieve this.
Thank you in advance!
There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.
EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/
Try using Flexbox, e.g.
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.left {
display: inline-block;
vertical-align: middle;
background: red;
}
.right {
vertical-align: middle;
background: green;
}
http://jsfiddle.net/hafpuvtq/
More info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to set the html, body elements of height: 100% and margin and padding of 0 outside the container class first before declaring any of the following classes:
HTML
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
top: 50%;
height: 100px;
}
.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2 {
height: 100px;
width: 100px;
background-color: green;
float: right;
}
The left and right both have to contain floats; left box for float: left; and right box for float: right;
That's right - floating an element removes it from the document flow, so it can't align itself to its parent element's line-height. Instead, put a wrapper div around each of the two child elements, and float the wrappers, left and right respectively. Make sure their height is 100%, and then vertically align the children inside them, as you currently are.
See http://jsfiddle.net/conLs2fd/6/.
this answer is just css
.wrapper {
position: relative;
height: 200px;
border: 1px solid gray;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
display:inline-block;
}
.right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: gray;
display:inline-block;
}
<div class="wrapper">
<div class="left child">This is left</div>
<div class="right child">This should be right</div>
</div>
Here is one way of doing it that involves using text-align: justify on the .wrapper parent block. If you can specify the height of .wrapper, you
can set line-height to the same value of the height.
Add a :after pseudo-element of height: 0 to force a second line for the line box containing the elements, which will allow the justification to work.
.wrapper {
border: 1px dotted gray;
height: 100px; /* for demo only */
line-height: 100px;
text-align: justify;
}
.wrapper:after {
content: '';
display: inline-block;
height: 0;
width: 100%;
}
.left, .right {
border: 1px dotted blue;
line-height: 1.2;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
Related
I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
I am trying to horizontally center an image within a div. However, I haven't been able to. I've tried setting the vertical-align to middle and the margin to auto, 0 auto, and every variation I can think of. Nothing works. Here is the code for how it is currently set up:
img {
border: 0;
margin: 0 auto;
}
.intro img {
border-radius: 50%;
vertical-align: middle;
padding: 10px;
}
The image is in the intro div. Any advice you can give would be helpful.
If you want to center your image both horizontally & vertically, this should do the trick :
.intro {
display: table;
width: 500px; /* works with any width */
height: 150px; /* works with any height */
background: #ccc;
}
.imgcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
background: #fff;
padding: 10px;
border-radius: 50%;
}
<div class="intro">
<div class="imgcontainer">
<img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
</div>
</div>
Use position:relative in parent .intro and use the code shown below in img, it will work with any width and height
display:block;
margin:auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
Snippet
.intro {
border: dashed red; /* demo */
display:inline-block; /* demo */
vertical-align:top; /* demo */
position: relative
}
.intro img {
border-radius: 50%;
vertical-align: middle;
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
}
.intro:first-of-type {
width: 200px;
height: 200px;
}
.intro:last-of-type {
width: 400px;
height: 300px;
}
<div class="intro">
<img src="//lorempixel.com/100/100" />
</div>
<div class="intro">
<img src="//lorempixel.com/100/100" />
</div>
The css style margin: 0 auto; should do the horizontal part of the trick.
For the vertical part you also need to take care of the parent.
Look at How to vertically align an image inside div for more info.
vertical-align works only in table cells. Try to use Flexbox. The element containing your image should have CSS properties:
display: flex;
align-items: center;
Both divs are inside another div :
#container {
width: 100%;
}
#container > .first {
display:inline-block;
float:left;
width:100px;
}
#container > .second {
display:inline-block;
float:right;
margin: 0 auto;
width:100px;
}
<div id='container'>
<div class='first'>Left</div>
<div class='second'>Right</div>
</div>
The second div is aligned right not center though. How do I get it centered without using tranforms? I also need it so it is in one line, no stacking.
Unfortunately there is no simple method using floats, inline-block or even flexbox which will center the 'middle' div whilst it has a sibling that takes up flow space inside the parent.
In the snippet below the red line is the center point. As you can see the left div is taking up some space and so the middle div is not centered.
Sidenote: You can't use float and display:inline block at the same time. They are mutually exclusive.
#container {
text-align: center;
position: relative;
}
#container:after {
content: '';
position: absolute;
left: 50%;
height: 200%;
width: 1px;
background: #f00;
}
#container > .first {
float: left;
width: 100px;
background: #bada55;
}
#container > .second {
display: inline-block;
width: 100px;
background: #c0feee;
}
<div id='container'>
<div class='first'>Left</div>
<div class='second'>Center</div>
</div>
Solution:
You would have to remove one of the elements from the document flow using position:absolute and then position that element accordingly.
#container {
text-align: center;
position: relative;
}
#container:after {
content: '';
position: absolute;
left: 50%;
height: 200%;
width: 1px;
background: #f00;
}
#container > .first {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: #bada55;
}
#container > .second {
display: inline-block;
width: 100px;
background: #c0feee;
}
<div id='container'>
<div class='first'>Left</div>
<div class='second'>Center</div>
</div>
<div style="width:100%;">
<div style="display:inline-block;float:left;width:100px;">Div 1</div>
<div style="display:block;width: 100px;margin: 0 auto;">
Div 2
</div>
</div>
There are two divs. I want the inner div to be vertically centered, without giving margins, as I want height of inner div to be auto, because its content can change and height can increase.
Here are the two divs:
Outer div:
.frontleft{
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
}
Inner div:
.c1{
height: auto;
width: inherit;
}
Thanks.
You can use Flexbox. display: flex on parent and align-self: center on the child item will center it vertically.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
background: #2C2955;
display: flex;
}
.c1 {
height: auto;
width: inherit;
background: #4C5FB1;
align-self: center;
}
<div class="frontleft">
<div class="c1">Center</div>
</div>
Why don't you use a table instead? With vertical-align in td tag.
<html>
<body>
<table class="frontleft">
<tr><td>I am a sentence</td></tr>
</table>
</body>
</html>
You should position inner element absolute and use transform property for vertical centering.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
position: relative;
background: orange;
}
.c1 {
height: auto;
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: blue;
}
<div class="frontleft">
<div class="c1">test</div>
</div>
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.