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;}
Related
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
The {margin:0 auto} can't make all the content center-placed in my case.
div.whole {
width: 620px;
overflow: auto;
border: 2px solid red;
}
div.left,
div.right {
margin: 0 auto;
float: left;
width: 300px;
height: 200px;
border: 2px solid black;
}
li {
list-style: none;
margin: 0 0;
padding 0 0 0 0;
display: inline-block;
border-bottom: 1px dashed black;
width: 100px;
}
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120" />
</div>
<div class="right">
<ul>
<li>x1</li>
<li>y1</li>
</ul>
<ul>
<li>x2</li>
<li>y2</li>
</ul>
<ul>
<li>x3</li>
<li>y3</li>
</ul>
<ul>
<li>x4</li>
<li>y4</li>
</ul>
</div>
</div>
The displayed effect is as the following.
How to put the left content--img photo and the right content in the center of div.left and div.right ?
How to put the left content--img photo and the right content in the center of div.left and div.right ?With the help of shareeditflag, display: inline-block;vertical-align: middle; added into my css,the css file was changed into following:
div.whole{
width:620px;
overflow:auto;
border:2px solid red;
text-align: center;}
div.left,div.right{
display: block;
margin: 0 auto;
height: 100%;
float:left;
width:300px;
height:200px;
border:2px solid black;
vertical-align: middle;}
li{
list-style:none;
display: inline-block;
vertical-align: middle;
padding 0 0 0 0;
display:inline-block;
border-bottom: 1px dashed black;
width:100px;}
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120"/>
</div>
<div class="right">
<ul>
<li>x1</li><li>y1</li>
</ul>
<ul>
<li>x2</li><li>y2</li>
</ul>
<ul>
<li>x3</li><li>y3</li>
</ul><ul>
<li>x4</li><li>y4</li>
</ul>
</div>
</div>
The displayed effect was changed into the following.
ALL the content were made center horizontally,
How to make the content vertically?
Centering the image in the Div you could use padding: to align. on .div-left
Centering the text content should be as simple as a text-align:centeron .div-right
there's a way to make anything centered. You don't need to know the height or width of any component, except the parent's. This involves a couple of things:
heres a fiddle example: https://jsfiddle.net/ahmadabdul3/eed1n1kj/1/
make sure the parent has an explicit height. I say this because html and body are sometimes forgotten. set their heights to 100%. The next thing is, every parent until your centered component should have some sort of height.
This is required for the centered-helper class that you will see.
The second thing is, the parent of the centered content should have text-align: center so that it can be centered horizontally.
Finally, the centered content should be set to vertical-align: middle along with the centered-helper should have height 100% so that it can help center your content vertically.
html:
<div class='parent'>
<div class='centered'>
centered
</div>
<div class='centered-helper'>
</div>
</div>
css:
.parent {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.centered {
display: inline-block;
vertical-align: middle;
}
.centered-helper {
display: inline-block;
vertical-align: middle;
height: 100%;
}
You can use margin for center align.
<head>
<style>
div {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
The text-align property will apply to images also.
So you could do this:
.left, .right {
text-align: center;
}
And this will center the image too.
jsFiddle: https://jsfiddle.net/sukritchhabra/uxve3n53/
Short way for margin is (THe first is for top and bottom the second is for left and right.
Margin:0 auto;
make sure that you give this the a child of a div .
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'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
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.