I have a div (#wrapper) containing 2 divs standing side by side.
I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!
Hope someone can help.
http://cssdesk.com/LWFhW
HTML:
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS:
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
You'll have no luck with floated elements. They don't obey vertical-align.
You need display:inline-block instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block; as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block does.
I recommend this:
Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
You can do this quite easily with display table and display table-cell.
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg
ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of its container.
http://jsfiddle.net/jmdrury/J53SJ/
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:
position: relative;
top: 50%;
transform: translateY(-50%);
A possible solution is to make wrapper div flex with items aligned on center as specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.
The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.
http://cssdesk.com/kyPhC
Related
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Why is btnow moved down? It should be inline with datewrap.
If I remove overflow:hidden from datewrap - it's ok.
But I need overflow:hidden on datewrap.
When you use of overflow:hidden[overflow property evaluating to something other than visible] , the baseline is the bottom edge of the margin-box[insert margin-bottom and see result],so this element for align its baseline with baseline of other element move up a bit.
for fix use of vertical-align: top; like this:
.btnow {
vertical-align: top;
//Other css
}
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
vertical-align: top;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
text-align really shouldn't be used to position elements. There are far better ways to achieve this.
I don't know why overflow is causing it to "teeter-totter", but below is some code to fix this.
.wrap{
display: flex;
justify-content: center;
/* and if you want to make sure the elements are always aligned vertically */
align-items: center;
/* remember: justify-content will always control the same direction as the flex
** box; so, if the flex box is a row, justify-content will control the horizontal
** spacing and align-items will control the vertical spacing, but if the flex box
** is a column justify-content will control the vertical and align-items will
** control the horizontal. */
width: 100%;
position: fixed;
top: 45px;
left: 0;
background: gold;
}
.datewrap, .btnow {
margin: 0 5px;
display: inline-block;
border: 2px solid red;
}
.datewrap{
overflow: hidden;
}
.btnow{
color: white;
background: green;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
position:inherit;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Reference Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.wrap {
position: fixed;
left: 0;
top: 45px;
width: 100%;
text-align: center;
background: gold;
}
.datewrap, .btnow {
display: inline-block;
margin: 0 5px;
border: 2px solid red;
}
.datewrap {
overflow: hidden;
vertical-align: bottom
}
.btnow {
color: white;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Note:
If you are writing code in real-time, you need to minimize your CSS.
I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:
https://jsfiddle.net/dtps4fw8/2/
any suggestions?
HTML:
<div class="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
See this fiddle
To make the 3 divs centered, first of all, remove the floatproperty and then to apply the floated effect, use display:inline-block. inline-block display gives a textual characteristics to the div. A text-align:center for the parent div would center these inline-block elements inside the parent.
Update your CSS as follows
.box {
width: 30%;
height: 200px;
display: inline-block;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
.content {
text-align: center;
}
First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;
I use flexbox. Very minimal and responsive.
.content {
width:100%;
display: flex;
flex-direction:row;
flex-wrap:wrap;}
.box {
height: 200px;
flex:1;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;}
I have 3 divs displayed inline-block that horizontally align:
div {
background:blue;
height:200px;
width:30%;
margin:0px;
padding:0px;
border:10px solid red;
display:inline-block;
box-sizing:border-box
}
When I add a text element into one of the divs, it's bumped down *(unless the text is position:absolute;).
What is the reason for this?
http://jsbin.com/suweba/2/edit
You need to add vertical-align: top to your div using CSS. The default property of vertical-align is baseline which is why your div with the content moves down to the bottom.
Here's a jsBin demo.
div {
background: blue;
height: 200px;
width: 30%;
margin: 0px;
padding: 0px;
border: 10px solid red;
display: inline-block;
vertical-align: middle;
box-sizing: border-box
}
#b {} text {
/* position:fixed; */
color: white;
font-size: 20px;
}
<body>
<div id="a">
<text>hello</text>
</div>
<div id="b"></div>
<div id="c"></div>
add vertical-align: top when using display: inline-block. The natural position of inline-block is baseline.
JSBIN
I have the following html structure:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
The parent is positioned absolutely, child1 and child2 are displayed side-by-side using inline-block.
I need this whole thing to be responsive based on the width of the 2 children divs. the problem is, if I increase the width of any of them, the parent's width remains the same. Changing its position to relative fixes this, but I have to have it in absolute.
Is there anyway to get it to be responsive?
EDIT:
I was hoping for this to be simple, but apparently not so much... :(
here's the actual HTML:
<div class="action_container">
<div class="action_inner">
<div class="action_title">Format Text</div>
<div class="action_body">
<div class="action_args_section"></div>
<div class="action_output_section"></div>
</div>
</div>
</div>
And the CSS:
<style>
.action_container {
display: block;
position: absolute;
}
.action_inner {
border: 1px solid black;
}
.action_inner {
min-width: 120px;
min-height: 50px;
background-color: white;
border: 1px solid #666;
border-radius: 5px;
}
.action_title {
font-size: 12px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.action_args_section {
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
}
.action_output_section {
display: inline-block;
width: 50px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
}
</style>
.parent{
position: absolute;
display: table;
}
.child{
position: relative;
display: table-cell;
}
Use this trick to set children in single line and parent to get width from them. Don't apply floats to nothing. And remember about white-space: nowrap; if You need to keep single line in child elements.
Here is fiddle.
.parent {
position:absolute;
height:50px;
border:1px solid red;
}
.child1 {
width:100px;
height:30px;
border:1px solid green;
}
.child2 {
width:150px;
height:30px;
border:1px solid blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Is this what you're looking for?
JSFiddle
.parent{
position:absolute;
left : 60px;
top : 60px;
width : auto;
height:auto;
border:1px solid black;
}
.parent .child{
display:inline-block;
border:1px solid blue;
}
<div class="parent">
<div class="child">aaaaaassssssssssssss</div>
<div class="child">sssssssccccccccccccccccccc</div>
</div>
Try use a max-width to set a maximum width for the parent div so it doesn't get wider than specified.
I did this easily. Changing the width of the divs changes the parent as well.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
div{border:1px solid black;}
.parent{
position:absolute;
width:auto;
height:auto;
}
.child1{
display:inline-block;
width:40px;
height:40px;
}
.child2{
display:inline-block;
width:30px;
height:40px;
}
</style>
If you want a responsive design, make sure you're using percentages, and not pixel values because the size of the divs will be calculated by the viewport width.
If you just want the parent to resize based on the absolute sizes of the child divs, add height:auto; width:auto to the parent. Then, change the child divs to display:block; float:left. The parent will resize accordingly.
Updated CodePen Demo
CSS
.action_container {
display: block;
position: absolute;
height:auto;
width:auto;
}
.action_inner {
border: 1px solid black;
}
.action_inner {
min-width: 120px;
min-height: 50px;
background-color: white;
border: 1px solid #666;
border-radius: 5px;
}
.action_title {
font-size: 12px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.action_args_section {
display: block;
float:left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
width:300px;
border: 1px solid red;
}
.action_output_section {
display: block;
float:left;
width: 150px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
border: 1px solid blue;
}
see the sample solution here in jsfiddle link
using this css:
.parent{
position:fixed;
background-color:blue;
height:auto;
width:auto;
}
.child1{width:200px;background-color:black;height:200px;float:left;}
.child2{width:200px;background-color:red;height:200px; float:left;}
if it is not what you're looking for,you can edit your css here then we can help
.parent{
float: left;
posetion: absolute;
background-color: yellow;
width:auto;
height: auto;
}
.parent div{
float: left;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
<div class="parent">
<div class="child1">this</div>
<div class="child2">this</div>
</div>
Here's The Code You Need :)
I am unable to set my text as vertical-center. My text is placed in position:absolute div.
<div class="mydiv">Frameworks and Extensions</div>
and the CSS:
.mydiv{
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
}
See fiddle: http://jsfiddle.net/3Zv5s
Sometimes Text will come two or one line. The text should be in vertical center like in table td.
Thanks for your valuable time and suggestion.
Try with this CSS:
.mydiv{
width:100px;
height:70px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align:center;
background-color:#ccc;
}
Try this
UPDATED
You could set container to position: absolute; and make .mydiv to display:table-cell and vertical-align:middle.
HTML -
<div id="container"><div class="mydiv">Frameworks and Extensions</div></div>
CSS -
#container{
position: absolute;
}
.mydiv{
width:100px;
height:70px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align:center;
background-color:#ccc;
}
Try for this
You could put your text into a table and use vertical-align
http://jsfiddle.net/3Zv5s/6/
Try this:
HTML:
<div class="mydiv">
<span class="span">Frameworks and Extensions</span>
</div>
CSS:
.mydiv{display:table-row;}
.span{display:table-cell;vertical-align:middle;height:inherit;}
Fiddle here.
You could use a combination of display: table and display: table-cell.
Change slightly your markup:
<div class="mydiv">
<div>Frameworks and Extensions</div>
</div>
And your CSS:
.mydiv{
width:100px;
height:70px;
border:1px solid red;
display: table;
background-color:#ccc;
overflow: hidden;
}
.mydiv div {
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/3Zv5s/2/
Option #1 : table-cell
Simplest solution, but only for IE7+
<div class="mydiv">
<span>Frameworks and Extensions</span>
</div>
.mydiv {
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
display: table;
}
.mydiv>span {
display: table-cell;
vertical-align: middle;
}
Fiddle
Option #2 : double span
A bit more tricky, but works under IE7
<div class="mydiv">
<span><span>Frameworks and Extensions</span></span>
</div>
.mydiv {
width:100px;
height:70px;
border:1px solid red;
position:absolute;
text-align:center;
background-color:#ccc;
display: block;
line-height: 65px; /* 70px applied on 1st span */
}
.mydiv>span {
display: inline-block;
vertical-align: middle; /* 2nd span centered */
line-height: 0;
}
.mydiv>span>span {
line-height: 20px; /* here's the "true" line-height */
}
Fiddle