This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 7 years ago.
I'm trying to align some DIVs and failing to succeed.
<div class="row">
<div class="name"><h3>Some long name in here</h3></div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>
This is what I did so far https://jsfiddle.net/uvo2xdxk/
How can I make the .info div to be vertically aligned inside the row?
You can achieve this by display: table-cell;
Remove float from .name and .info and assign display: table-cell; vertical-align: middle; to them :)
.row {
display: table;
width: 450px;
background-color: yellow;
border: 1px solid blue;
}
.name {
background-color: red;
display: table-cell;
vertical-align: middle;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.info {
display: table-cell;
width: 150px;
vertical-align: middle;
background-color: ccc;
border: 1px solid green;
text-align: right;
}
<div class="row">
<div class="name">
<h3>Some long name in here</h3>
</div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>
https://jsfiddle.net/uvo2xdxk/5/
try this one
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
assign row display:table; property and its child display:table-cell; and vertical-align:middle; and also remove the float:right; from child
Add to your .info:
.info{
//...
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
And your .row should set:
position: relative;
I had updated your jsfiddle
I have modified your css please check here
.name {
background-color: red;
display: inline;
float: left;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
height: auto;
vertical-align: middle;
overflow:hidden;
position:relative;
}
.info {
float: right;
display: inline-block;
background-color: ccc;
border: 1px solid green;
vertical-align: middle;
position:absolute;
right:0;
transform:translateY(-50%) ;
top:50%;
}
Please check if it works for you.
You can check with the below link.
https://jsfiddle.net/uvo2xdxk/7/
.name {
background-color: red;
display: inline;
float: left;
}
.delete {
background-color: green;
display: inline;
margin-right: 0px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.info {
height:57px;
display: table-cell;
vertical-align:middle;
background-color: ccc;
border: 1px solid green;
top: 25%;
}
Related
Trying to show dive next of span but it is not working.I do not know how to align. If anyone know please help to find the solution.
app.component.html:
<div class="content">
<div class="title">Titles</div>
<span class="icons"> images </span>
</div>
app.component.css:
.content{
width: 100%;
height:150px;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
}
expecting:
Demo:https://stackblitz.com/edit/angular-svg-use-2c9trb?file=src%2Fapp%2Fapp.component.css
Use display:inline-block;
p {
font-family: Lato;
}
.content {
width: 100%;
height: 150px;
direction: rtl;
text-align: left;
}
.title {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
.icons {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
and use direction and rtl to reverse direction of elements
add inline-flex to displays as an inline-level flex container. Then add margin-inline-end to get space between div and span.
.content{
width: 100%;
display: inline-flex;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
margin-inline-end: 5px;
}
How change my code to create new classes: title and body from div-table-col with align property inside?
Header must be moved to right and Test must be moved to the left.
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.div-table-row { display: table-row; width: auto; clear: both; }
.div-table-col { float: left; display: table-column; width: 50%; background-color: #ccc; }
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="right">
Header:
</div>
<div class="div-table-col" align="left" padding-left="5px">
Test
</div>
</div>
</div>
I want to create:
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.title { display: table-row; width: auto; clear: both; align:right}
.data { float: left; display: table-column; width: 50%; background-color: #ccc; align:left padding-left:5px}
but it does't works. It displaies properly now, but I would like to remove align property and padding-left and move it to styles.
I dont know if I understand what you want, but if the only thing is Header on the right and Test on the left you need to make an other float, becasue you're applying the same float to both of them.
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.div-table-row { display: table-row; width: auto; clear: both; }
.div-table-col2 { float: left; display: table-column; width: 50%; background-color: #ccc; }
.div-table-col { float: right; display: table-column; width: 50%; background-color: #ccc; }
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="right">
Header:
</div>
<div class="div-table-col2" align="left" padding-left="5px">
Test
</div>
</div>
</div>
I have 4 divs.
1 - Divs '.left' and '.right' should be 150px min. - > OK
2 - Divs '.middle1' and '.middle2' should get the remaining with
divided by them. -> NOT OK
Why do I have a blank space between the '.middle2' and '.right'?
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
float: left;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1"></div>
<div class="middle2"></div>
<div class="right"></div>
</div>
Not sure how do you want to display. Instead of playing around with floats, you can use display:flex to achieve the same.
Check the below snippet
.container {
display:flex;
}
.left {
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1">m1</div>
<div class="middle2">m2</div>
<div class="right">right</div>
</div>
Hi this is not the best way to do this.
You should make a div with three sections of it and divide the middle one into two sections.
So basically the structure you need is
Div > 3 columns and then the middle column has two columns conatined.
However, here is a quick fix for your code :
- Apply float:right to .middle2
- Fix the width percetage for .middle1 and .middle2
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 31%;
}
.middle2 {
float: right;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 31%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
How to align .content in the middle (vertically) without specifying height of .container explicitly?
<div>
<div class="container"></div>
<div class="content"></div>
<div class="one"></div>
</div>
<style>
.container {
border:1px solid red;
display: inline-block;
}
.content {
height: 50px;
width: 70px;
display:inline-block;
vertical-align:middle;
border:1px solid green;
}
.one {
height: 200px;
width: 20px;
background: red;
display: inline-block;
}
</style>
Try specifying vertical-align: middle to both child elements:
.container {
border: 1px solid red;
display: inline-block;
}
.content {
height: 50px;
width: 70px;
display: inline-block;
vertical-align: middle;
border: 1px solid green;
}
.one {
height: 200px;
width: 20px;
background: red;
vertical-align: middle;
display: inline-block;
}
<div class="container">
<div class="content">text</div>
<div class="one">text</div>
</div>
I'm setting my div display as table-cell like this.
HTML
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="lastchild">4</div>
</div>
CSS
.child{
background: red;
width: 20px;
display: table-cell;
}
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
}
.parent {
width:200px;
}
http://jsfiddle.net/Lx1p3y93/
I wonder if there's any way I can set the rightmost cell right aligned?
Change CSS to:
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float:right;
}
.child {
background: none repeat scroll 0 0 red;
display: table-cell;
float: left;
width: 20px;
}
Remove table-cell property and use float property. Update your CSS like below.
.child{
background: red;
width: 20px;
float:left;
}
.lastchild {
background: blue;
width: 20px;
margin-right: 0;
float:right;
}
FIDDLE DEMO
How about pseudo elements? demo
.child{
background: red;
width: 20px;
display: table-cell;
float:left;
}
.child:last-child {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float:right;
}
.parent {
width:200px;
}
For this purpose you can use this piece of code into your .lastchild class:
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float: left;
}
This will align the .lastchild item to the most right of the .parent element