How can I align two inline divs so that the their adjacent edges are center?
So I'd like it to look like this:
div1div1 div2div2
div1 div2
div1div1div1 div2div2
I tried using inline block like like below but it is merely centering each line.
.container {
text-align: center;
}
.left-div {
display: inline-block;
}
.right-div {
display: inline-block;
}
<div class="container">
<div class="left-div">div1div1</div>
<div class="right-div">div2div2</div>
</div>
<div class="container">
<div class="left-div">div1</div>
<div class="right-div">div2</div>
</div>
<div class="container">
<div class="left-div">div1div1div1</div>
<div class="right-div">div2div2</div>
</div>
https://jsfiddle.net/fkfmh7md/ to change the distance between divs, change 5px in padding:0 5px to any other value
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.container div {
display: table-cell;
padding: 0 5px;
}
.container div.left {
text-align: right;
}
<div class="container">
<div class="left">div1div1</div>
<div>div2div2</div>
</div>
<div class="container">
<div class="left">div1</div>
<div>div2</div>
</div>
<div class="container">
<div class="left">div1div1div1</div>
<div>div2div2</div>
</div>
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
I have some problems with aligning text to the center:
.list {
width: 100%;
height: 100%;
}
.row {
vertical-align: middle;
width: 100%;
height: 30px;
text-align: center;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>
What I would like to achieve is to get list of names and messages, where each name and message are in one row. But currently, where I am trying to align text in row it doesn't work. Any ideas?
You can do this with display:flex:
.list {
width: 100%;
height: 100%;
}
.row {
display: flex;
justify-content: center;
align-items: center;
text-align:center;
width: 100%;
height: 30px;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>
I am trying to design a section which 3 image. I can get the two images to display by block easily. I can float the third image to the right and adjust the height easily. However my issue is it does not align side by side.Below is an example of what I am trying to achieve
This is an example of what I have so far
.image-one,
.image-two {
width: 250px;
background-color: green;
display: block;
margin-top: 10px;
}
.image-three {
float: right;
background-color: lightblue;
width: 250px;
height: 200px;
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
You should be able to simple add flex to the container, and then add the content within a left and a right div.
Here's a working example:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.image-one,
.image-two {
width: 250px;
height: 95px;
background-color: green;
margin-bottom: 10px;
}
.image-three {
background-color: lightblue;
width: 240px;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="right">
<div class="image-three"> Image three </div>
</div>
</div>
You can use flexbox for this:
.container {
display: flex;
flex-direction: column; /* align items in columns */
flex-wrap: wrap; /* wrap to a new column when height is reached */
justify-content: space-between; /* add spacing in between top and bottom image */
height: 210px; /* height of your 2 images plus and spacing you want */
width: 510px; /* width of 2 columns plus any spacing */
}
.image-one,
.image-two {
width: 250px;
height: 100px;
background-color: green;
display: block;
}
.image-three {
background-color: lightblue;
width: 250px;
height: 210px; /* I would make this image the height of the other 2 plus spacing */
align-self:flex-end; /* align this to the right of the container */
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
Maybe you can add some internal divs like this:
<div class="container">
<div class="container-left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="container-right">
<div class="image-three"> Image three </div>
</div>
</div>
Then, add css to container-left and container-right to properly set the width and the float. Like this:
.container-left, .container-right{
width:250px;
float:left;
}
Why don't you make use of bootstrap columns?
HTML
<div class="container">
<div class="row main-row">
<div class="col-6 left-col">
<div class="row left-col-top">
<!-- Top left image here -->
</div>
<div class="row left-col-bottom">
<!-- Bottom left image here -->
</div>
</div>
<div class="col-6 right-col">
</div>
</div>
</div>
CSS
.main-row {
height:300px;
}
.left-col-top {
background-color:blue;
height:50%;
}
.left-col-bottom {
background-color:red;
height:50%;
}
.right-col {
background-color:green;
height:100%;
}
Easy flexbox solution :)
#main, #left {
display:flex;
}
#left {
flex-direction: column;
flex: 1;
}
.section {
flex: 1;
margin: 2px;
background-color: green;
}
<div id="main">
<div id="left">
<div class="section">Hello</div>
<div class="section">Hello</div>
</div>
<div id="right" class="section">Hello</div>
</div>
I have three column's and the middle column has a button which i want to vertially align in the middle.
<div class="row">
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
<div style="vertical-align:middle">
<button type="button">Click</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
</div>
Style
.mypanel {
height: 200px;
border: 1px solid black;
}
However vertical-align:middle does not make any affect on the content of the div
DEMO
.mypanel {
height: 200px;
border: 1px solid black;
display:table;
}
.mypanel div{
display:table-cell;
vertical-align:middle
}
this will solve the problem
https://jsfiddle.net/xyx3enz1/
.mypanel {
height: 100px;
width: 100%;
display: table;
border: 1px solid black;
}
.text-centered {
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div class="row">
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
<div class="text-centered">
<button type="button">Click</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="mypanel">
</div>
</div>
</div>
My favorite approach is to use pseudo elements like :after to create an element, set its height, and then vertical align based on that. It doesn't require much CSS either:
// I changed the col-md-1 to col-md-4 for this example
.col-md-4 {
text-align: center;
height: 200px;
}
.col-md-4 .mypanel {
height: 100%; // Make sure .mypanel is set to 100% height otherwise our pseudo element won't know what 100% height is
}
// Here is the pseudo element, set the vertical align here and on your button
.col-md-4:nth-child(2) .mypanel:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.col-md-4:nth-child(2) .mypanel button {
vertical-align: middle;
display: inline-block;
}
Check out this working jsFiddle.
folks!
there is a problem layouting my page header :/
i want to place the logo and title on the left, and some usermenu/logout/messages on the right.
html:
<div class="banner">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">foo</div>
<div class="logout">bar</div>
</div>
<div class="content">
Some Content..
</div>
css:
.banner {
height: 50px;
background-color: #feefef;
}
.img, .title, .logout{
vertical-align: text-bottom;
height:100%;
}
.logo {float: left;}
.title {float:left;}
.logout {float:right;}
https://jsfiddle.net/z9gervtm/3/
How do i move those texts to the bottom?
use flexbox to simplify your code
.banner {
height: 50px;
background-color: #feefef;
display: flex;
justify-content: space-between;
align-items: flex-end
}
.left {
display: flex;
align-items: flex-end
}
<div class="banner">
<div class="left">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">foo</div>
</div>
<div class="logout">bar</div>
</div>
<div class="content">
Some Content..
</div>
I would just use flexbox and get rid of the floats. Add divs to have a left and right banner section. Align-items center to make it look nice:
.banner {
display: flex;
justify-content: space-between;
height: 50px;
padding: 0 20px;
background-color: #feefef;
}
.left {
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;
}
.left img,
.right div:first-of-type {
margin-right: 10px;
}
<div class="banner">
<div class="left">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">Title</div>
</div>
<div class="right">
<div class="logout">Logout</div>
<div class="messages">Messages</div>
</div>
</div>
<div class="content">
Some Content..
</div>
I want to display a number and 2 text areas in a row.
The number should be in a "box" , with the background the height of the row and the number it's self should be vertically and horizontally centered in the "box".
I know I could do something like position: absolute; top: 0, left: 0 on the .number but this brings it out of the document flow. and the text, actual number does not get centered.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.number {
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
}
.row > div {
display: inline-block;
vertical-align: top;
}
.row {
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
EDIT 1: You can see in the snippet that the box is not the full height of the container. That is not what I want.
EDIT 2: I guess you could cheat by using gradient but then I would have to make sure that the text area matches up to where the number box end to make the gradient look like the color is for the number "box".
Use flex display: table-cell
Update 1: show how to create "margin" wíthout using cell padding
Update 2: show a progressive enhancement to use flex when available
*{
box-sizing: border-box;
}
.container {
width: 40%;
}
.number{
background: skyblue;
}
.row > div {
display: table-cell;
vertical-align: middle;
}
.row {
background: lightgreen;
position: relative;
}
/* 3 ways to create a left margin on textArea */
.row .textArea.nr1 { border-left: 10px solid transparent; }
.row .textArea.nr2 { position: relative; left: 10px; }
.row .textArea.nr3 { padding-left: 10px; }
/* feature detect - use flex when available */
#supports (display: flex) {
.row > div {
display: block;
}
.row {
display: flex;
}
.row .number {
display: flex;
align-items: center;
}
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr1">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr2">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr3">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
You can use flexbox to achieve that, all modern browsers support it, and with prefixes it also works on IE10.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: flex;
}
.number {
background: skyblue;
display: flex;
align-items: center;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
Or, use CSS table making it to work on legacy browsers too.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: table;
width: 100%;
}
.number,
.textArea {
display: table-cell;
}
.number {
background: skyblue;
white-space: nowrap;
vertical-align: middle;
}
.textArea {
width: 100%;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.container{
width: 40%;
}
.number{
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
height: 40px;
padding-top: 11px;
}
.row > div{
display: inline-block;
vertical-align: top;
}
.row{
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>