I have a simple div with a display: inline-block; and a wrap to center it. It appears a pixel at the bottom of the content. Do you know why and how to get rid of it?
Here is the problem to check: http://jsfiddle.net/8S8aH/
HTML:
<div class="wrap">
<div id="content"></div>
</div>
CSS:
body{
margin:0;
}
.wrap {
text-align: center;
background:red;
}
#content {
margin:0px auto;
text-align:left;
width:250px; height:100px;
display: inline-block;
background:whiteSmoke;
}
Change the vertical-align value on #content
#content {
display: inline-block;
vertical-align: bottom;
}
http://jsfiddle.net/8S8aH/4/
Use display: block for content div
#content {
margin:0px auto;
text-align:left;
width:250px;
height:100px;
display: block;
background:whiteSmoke;
}
JS Fiddle Demo
Personally, I prefer this to clear space in inline-block elements.
Demo
#content:after{
content:'\00a0';
}
There are alternatives as well.
Related
how could i do vertical-align:bottom for some divs that have float:left?
you can see the source here: http://jsfiddle.net/Lb1su4w2/
this is what i have: (every color is a different div)
this is what i want to have:
Vertical align only works with inline block elements, floated elements ignore the vertical align property.
Update the box class with the following:
.box {
display: inline-block;
vertical-align: bottom;
width:80px;
}
I would make them all inline block elements and remove the whitespace with one of these techniques.
Updated fiddle: http://jsfiddle.net/9rcnLb8n/
Alternatively you could use flexbox with the align-self: flex-end; property.
HTML:
<div id='wrapper'>
<div id='a' class='box'>aa</div>
<div id='b' class='box'>bb</div>
<div id='c' class='box'>cc</div>
<div id='d' class='box'>dd</div>
</div>
CSS:
.box {
width:80px;
vertical-align: bottom;
display: inline-block;
}
#a {
background-color:red;
height:200px;
}
#b {
background-color:green;
height:100px;
}
#c {
background-color:yellow;
height:150px;
}
#d {
background-color:blue;
height:300px;
}
#wrapper {
border: 1px solid pink;
display: table;
}
In this case don't use:
float: left;
Instead use:
display: inline-block;
Check out my fiddle:
http://jsfiddle.net/Lb1su4w2/6/
i am attempting to align 3 sub-div elements in one line, first element with left floating, third - with right and 2nd - centered.
Below my draft. What I have missed?
http://jsfiddle.net/yDzL9/
In my real e-shop the problem is in aligning of 2nd div which contains input (button), but in jsfiddle's example the problem with the third div.
Use display: inline-block for all sub elements and set white-space: nowrap; property to parent div.
Example-
HTML:
<div id="container">
<div class="wishlist">
</div>
<div class="cart">
</div>
<div class="compare">
</div>
</div>
Method 1 (Without Floated div):
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
}
#container div{
display: inline-block;
width:100px;
height:26px;
}
Working Example
Method 2 (With Floated div)
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
text-align: center;
}
#container div{
display: inline-block;
width:50px;
height:26px;
}
.wishlist{
background-color:blue;
float: left;
}
.cart{
background-color:black;
}
.compare{
background-color:red;
float: right;
}
Working Example
Using the display: flex css rule it will work as you want it to!
HTML:
<div id="container">
<div class="wishlist"></div>
<div class="cart"></div>
<div class="compare"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
#container {
height:26px;
width:300px;
padding: 10px;
display: flex;
background-color:green;
}
#container > div {
height: 90%;
width: 90px;
}
.wishlist {
float: left;
background-color:blue;
}
.cart {
margin: 0 auto;
background-color:yellow;
}
.compare {
float: right;
background-color:red;
}
As shown in this jsfiddle, and here is another one.
I know this is a drawn out question but with all the examples I could find on the net for some reason I cannot replicate.
I need 2 div boxes that are 300px; wide to be next to each other and be centered in the middle.
I have the following code
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<style>
.container {
width:100%;
text-align:center";
}
.box1 {
float:left;
width:300px;
}
.box2 {
float:right;
width:300px;
}
</style>
For whatever reason I can get the boxes next to each other but it stays on the left side of the screen instead of the center. I just need them centered
Example: http://jsbin.com/ubanuf/12/edit (not mine)
It is cause you have float: left. There are several ways to do that, you can add display: inline-block; or add margin: 0 auto;
.box1 {
float:left;
width:300px;
display: inline-block;
}
.box2 {
float:right;
width:300px;
display: inline-block;
}
Change your CSS as follow
.container {
width:100%;
text-align:center;
}
.box1, .box2 {
display: inline-block;
width:300px;
}
inline-block elements will be align with the text, if you set the text-align: center for the container div.
you have extra (") double quote at your CSS text-align: center";.
Here is an other way (there are plenty indeed!):
.container {
margin: 0 auto;
width: 100px;
}
.box1 {
width:50%;
display: inline-block;
}
.box2 {
float: right;
width:50%;
display: inline-block;
}
There is redundant space between the two child DIVs if you use inline-block, here is my solution.
container {
width:100%;
text-align:center;
font-size: 0; // hack the space
}
.container div{
font-size: 16px; // hack "hack the space"
}
.box1 {
display:inline-block;
width:300px;
}
.box2 {
display:inline-block;
width:300px;
}
you does not need to do any thing..just give box1 and box2 width in "%" or give container width in "Pixel". That will solve your problem
Like This
<style>
.container {
width:100%; //or change it to 600px
text-align:center";
}
.box1 {
float:left;
width:300px; //or change it to 50%
}
.box2 {
float:right;
width:300px; //or change it to 50%
}
</style>
Try to keep everything in "%" or "Pixel"
Thanks
I just discovered the display: table and display: table-cell; vertical-align: middle method to align divs verticaly today.
I am using it at many places of my code, but i meet a specific case where i can't make it works!
When i want to verticaly align n elements containing elements which has the same font-size, everything works fine, but if i want a text bigger on one inline elements than others, here is what happens:
HTML:
<div class="wrapper">
<div class="menu">
<div class="left"><span>LEFT</span>
</div>
<div class="middle"><span>MIDDLE</span>
</div>
<div class="right"><span>RIGHT</span>
</div>
</div>
</div>
CSS:
button {
margin:0;
padding:0;
cursor:pointer;
}
.wrapper {
height: 300px;
width: 600px;
background-color:red;
white-space: nowrap;
}
.menu {
height: 100%;
width: 80%;
}
.left {
height: 100%;
width: 20%;
display:inline-table;
background-color:blue;
}
.middle {
height: 100%;
width: 60%;
display:inline-table;
background-color:orange;
}
.right {
height: 100%;
width: 20%;
display:inline-table;
background-color:green;
}
span {
display:table-cell;
vertical-align:middle;
}
.middle span {
font-size:5em;
}
RESULTS:
Here is a JSFiddle showing the issue
How to avoid that? Maybe there is a better way than the inline-table trick for that case?
Just vertical align the direct children of the container, in your case this will do the job:
.menu > div {
vertical-align: middle;
}
Another solution is to add a fixed line height to the spans:
.menu span { line-height: 50px;}
How do I center align the image to vertically and horizontally to the div.
I need to get this without fixing height or padding because the image sizes are not constant so it should be flexible with all the images.
Here is my trail
http://jsfiddle.net/yHdAx/2/
To center align an image, you have to set it's display to block, and then the left and right margins to auto. I also did this with the top and bottom margins, in the new code example. Here is the code required to make this work:
CSS
.test {
background-color:#999;
height:60%;
display:block;
vertical-align:middle;
padding-top: 25%;
padding-botton: 25%;
}
.test img {
max-width:50%;
vertical-align: ;
display: block;
margin: auto auto auto auto;
}
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
</div>
Hey now you can used to table-cell properties in your div as like this
live demo http://jsfiddle.net/yHdAx/3/
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
Css
.test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
text-align:center;
}
.test img{
max-width:50%;
}
more info http://www.brunildo.org/test/img_center.html
Apply display:block to the image and set its margins to auto.
.test {
background-color:#999;
padding: 50px 0;
}
.test img {
display: block;
margin: auto;
}
Here is the fiddle, http://jsfiddle.net/yHdAx/5/
I tried to play with only one div
div {
display:table-cell;
background:red;
width:500px;
height:500px;
vertical-align:middle;
text-align:center;
}
I hope this will also help you :- http://jsbin.com/ihunuq/3/edit
What if you don't set a height on the containing div, would the desig break then?
To center the image just use
.test img {
display:block;
width:25%;
margin:0 auto;
}
You can use position: absolute.
Something like that: jsfiddle.
.test{
background-color:#999;
height:60%;
width: 100%;
position: relative;
}
.test img{
max-width:50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}