I've looked at several other posts on vertically aligning divs but the solutions I'm finding don't seem to be working for my use case. I'd like to vertically center the div with the class "I-want-to-center-this-while-ignoring-the-other-two-divs".
I have a very simple example on jsfiddle here.
Can anyone help me out with this?
Code:
HTML:
<div id="container">
<div class="I-want-to-ignore-this"></div>
<div class="I-want-to-ignore-this float-right"></div>
<div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
</div>
CSS:
#container {
height: 300px;
width: 100%;
border: 2px solid black;
}
.I-want-to-ignore-this{
float:left;
height: 75px;
width: 100px;
border: 2px solid grey;
}
.float-right {
float: right;
}
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
vertical-align: center;
}
In the comment section you specified that your container will be fixed height. The simplest solution is to just make the position of the center div relative and move it down toward the center of the box with the "top" CSS attribute.
.I-want-to-center-this-while-ignoring-the-other-two-divs{
border: 2px solid green;
height: 150px;
width: 150px;
position:relative;
top:70px;
margin: auto;
vertical-align: center;
}
Here is the updated JSFiddle.
(NOTE: If your container changes size you would need to update the variable; but being fixed this solution should work fine)
I would simply add a top margin to your center div:
.I-want-to-center-this-while-ignoring-the-other-two-divs {
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
margin-top: 73px;
}
Since you have a fixed height on your parent container and your div has known height, this is the simplest way of doing it.
The math is: ( parent-height - (child-height+top-border+bottom-border) ) / 2
http://jsfiddle.net/audetwebdesign/7SfKW/10/
Add this to center div css:
position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;
Remove margin from there
Add this to container:
position:relative;
Edit: JSFiddle
.I-want-to-center-this-while-ignoring-the-other-two-divs{
position:relative;
top:25%;
border: 2px solid green;
height: 150px;
width: 150px;
margin: auto;
}
check this: JSFIDDLE
Your container is 300px height and the div you want to center is 150px. By applying simple math to center the div you need pad 50px above and 50px below to center the div. so top:25% would do that.
Just add position and top property to your css as shown above
Related
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;}
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
I have 2 divs side by side.
The left div has all different heights, how can I make the right div automatically resize to the size of left div? If the content of the right div is larger than the left div there should be a scroll bar added to it.
The HTML
<div class="wrapper">
<div class="left"><!-- PHP Generated Content --></div>
<div class="right"><!-- PHP Generated Content --></div>
</div>
The CSS
.left{
width: 70%;
float: left;
}
.right{
width: 29%;
float: right;
border: solid 1px #000000;
height: 100%;
min-height: 200px;
overflow: auto;
}
.wrapper{
height: auto;
float: left;
border: solid 1px red;
}
http://jsfiddle.net/userdude/MJrS9/
Easy equal height columns:
.left{
width: 70%;
display: table-cell;
}
.right{
width: 29%;
border: solid 1px #000000;
display: table-cell;
}
.wrapper{
display: table;
border: solid 1px red;
width: 100%;
}
http://jsfiddle.net/g5mvs/
Without giving a pre-defined height to the parent '.wrapper', there is no way (that I can see) of detecting the height set against '.left' and applying it to '.right'. Even setting the height of the right div to 'inherit' would only pick up the height which is adjusting dynamically anyway. Perhaps someone could suggest a solution using javascript.
Okay here is the problem, I have images of different sizes, but that doesn't really matter because their width is always greater then their height, and all images are resized to a 100px width (height still is different in each image)
I am trying to vertical align the images inside a div of 100px x 100px. I tried all kinds of things. line-height, margin's auto, table cell methods all don't work for me...
Here's the html:
<div class="kassabon_product_image">
<img src="product1.png" />
</div>
and here's the CSS
.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}
.kassabon_product_image img{
width: 100px;
}
.kassabon_product_image{
display:table-cell;
vertical-align:middle;
}
Remove the vertical-align from the img and that should do the trick.
see comments
.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}
.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>