I'd like to vertically align the contents of my div.
So basically 'Hello test' should be in the center of the div, vertically.
Demonstration
.parent {
background:blue;
float:left;
width:100%
}
.parent div {
float:left;
width:50%;
}
h1 {
font-size:50px;
margin:0;
padding:0;
}
<div class="parent">
<div>
<h1>hello!</h1>
<p>test</p>
</div>
<div>
<img src="http://placehold.it/250x250" />
</div>
</div>
You can use table layout for this:
.parent {
background:blue;
width:100%;
display: table;
}
.parent div {
display:table-cell;
vertical-align:middle;
width:50%;
}
h1 {
font-size:50px;
margin:0;
padding:0;
}
<div class="parent">
<div>
<h1>hello!</h1>
<p>test</p>
</div>
<div>
<img src="http://placehold.it/250x250" />
</div>
</div>
Modern flexbox solution (IE10+ and all modern browsers supported):
.parent {
display: flex;
align-items: center;
}
DEMO
You can learn more about flexbox with this excelent article :)
Use this css
body{
margin:0 auto;
}
.parent {
background:blue;
float:left;
width:100%
}
.parent div
{
text-align:center;
width:50%;
margin:0 auto;
}
h1 {
font-size:50px;
margin:0;
padding:0;
}
Related
I need the yellow div to float beside the the purple square. Orange on top, pink on the bottom and yellow to the left of the square. It worked when I took off the flex-wrap:wrap; from the right div but then all three divs went to the left. Is there anyway to just have the yellow div float to the right of the purple square to take up the remainder of the green area while the other two stay in their current spots?
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsideright"></div>
<div id="rightsidebottom"></div>
</div>
</div>
This should work as intended.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
max-width:calc(80vh - 25px);
background-color:purple;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
flex: 1;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
Edit: To make this answer a bit more universal, here is how the principle works: if you want div A to grow up to a max size, and div B to fill the remaining space, you have to make sure that:
The container is display: flex
A has width: 100% and has a max-width
B has flex: 1
Take note that if A would have flex: 1 as well, its greedy 100% would be overruled by the more generous flexing rule. Therefore the most minimal working example is:
.container {
display: flex;
}
.up-to-max {
width: 100%;
max-width: 100px;
background: red;
}
.filler {
flex: 1;
background: green;
}
<div class="container">
<div class="up-to-max">A</div>
<div class="filler">B</div>
</div>
(Watch in full page to resize the window)
You have to modify your html a bit and to adapt the css.
On a side note, you shouldn't use that much id, use classes.
Also, use flex-basis to give flex children a width.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-direction: column;
}
#right>*,
#right>* > *{
flex: 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
margin-left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsideright{
background-color:yellow;
}
#rightsidebottom{
background-color:pink;
}
.wrapper {
display: flex;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
I have 4 divs aligned horizontally in the same line. I'm trying to center vertically the second and third through 'vertical-align' attribute with no success.
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width:100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width:100px;
height:45px;
display:inline-block;
background-color:green;
vertical-align: center;
word-break: break-word;
}
#center2 {
width:100px;
height:45px;
display:inline-block;
background-color:orange;
word-break: break-word;
}
#right {
width:100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">Center 2 Center 3</div>
<div id="right"> </div>
</div>
View in Fiddle
I don't want to align second and third content with 'position: relative; top: Xpx' or 'line-height: 45px;' due to second and third can have until two lines so I need to stay correctly aligned with one line and two lines.
Just add display: inline-flex; and align-items: center; to #center1 and #center2.
Edit: Dont forget to float them left.
Example:
#container {
width:100%;
height:45px;
background-color:yellow;
}
#left {
width: 100px;
height:45px;
float:left;
background-color:red;
}
#center1 {
width: 100px;
height:45px;
background-color:green;
float: left;
display: inline-flex;
align-items: center;
}
#center2 {
width: 100px;
height:45px;
background-color:orange;
float: left;
display: inline-flex;
align-items: center;
}
#right {
width: 100px;
height:45px;
float:right;
background-color:blue;
}
<div id="container">
<div id="left"> </div>
<div id="center1">Center 1</div><div id="center2">a long line of text!</div>
<div id="right"> </div>
</div>
I would probably use flexbox, it will make it easier to have a bar like that and easier to center thing vertically.
Have a look.
body {
margin: 0;
}
.flex-bar {
display: flex;
width: 100%;
}
.box {
display: flex;
width: 95px;
height: 40px;
justify-content: center;
align-items: center;
padding: 2.5px;
}
.filler {
flex: 1;
}
.red {
background: red;
}
.green {
background: green;
}
.orange {
background: orange;
}
.yellow {
background: yellow;
}
.blue {
background: blue;
}
<div class="flex-bar">
<div class="red box"></div>
<div class="green box">Centered #1</div>
<div class="orange box">Centered text number 2</div>
<div class="box yellow filler"></div>
<div class="blue box"></div>
</div>
I hope this helps.
You need to use vertical-align:middle; on both, the second and third element like this:
#table{
display:table;
width:100%;
}
#container{
display:table-row;
}
#left{
display:table-cell;
height:100%;
width:100px;
line-height:45px;
background-color:red;
}
#center1{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:green;
word-break: break-word;
vertical-align:middle;
}
#center2{
width:100px;
line-height:45px;
text-align:center;
display:table-cell;
background-color:orange;
word-break: break-word;
}
#space{
background-color:yellow;
display:table-cell;
}
#right{
width:100px;
line-height:45px;
display:table-cell;
background-color:blue;
}
<div id="table">
<div id="container">
<div id="left"> </div>
<div id="center1">
Center 1
</div>
<div id="center2">
Center 2 <br>Center 3
</div>
<div id="space">
</div>
<div id="right" style=""> </div>
</div>
</div>
Updated to center the text vertically and not only the element
To position the text, use line-height (vertical position) which should be equal to the height of the element and text-align:center to center the text horizontally.
I am able to make a horizontally scrolling div using the following:
CSS
.scroll {
width:100%;
height:100px;
overflow-x:auto;
white-space:nowrap;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
HTML
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
However, once this is nested inside a div with display:table, the .scroll div no longer scrolls and instead stretches the .scroll div to show all of the boxes.
Pretty sure there's an easy fix for this, any ideas?
For reference: http://jsbin.com/makigome/29/edit?html,css,output
Try this CSS, hope it helps
.table {
display: block;
width:100%;
}
.table-cell {
display:block;
width:100%;
}
.scroll {
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
Is not possible using table and table cell, you can do it using float like this:
.table {
float:left;
width:100%;
}
.table-cell {
float:left;
width:100%;
}
.scroll {
clear:both;
height:100px;
width:100%;
overflow-x:auto;
border:1px solid red;
white-space:nowrap;
margin:10px 0px;
}
.box {
width:200px;
height:100%;
background:orange;
display:inline-block;
vertical-align:top;
}
For anyone interested, I fixed this by setting position:absolute to the .scroll div and wrapping it within another div with position:relative like so:
http://jsbin.com/makigome/39/edit?html,css,output
<div class="table">
<div class="table-cell">
<div class="scroll-wrapper">
<div class="scroll">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</div>
.table {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
width:100%;
}
.scroll-wrapper {
height:100px;
position:relative;
}
.scroll {
height:100%;
width:100%;
overflow-x:auto;
white-space:nowrap;
position:absolute;
}
.box {
width:200px;
height:100%;
display:inline-block;
vertical-align:top;
}
here a parent div like this
.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}
In responsive web mobile devices the child div is not align vertically middle how can i align middle?? please help me..
Thanks.
Try adding :
.div parent{
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}
FIDDLE
This is an alternative take, using CSS tables
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>Child</div>
</div>
</div>
</div>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
width:100%;
height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
vertical-align:middle;
text-align:center;
}
.cell div {
background:red;
display:inline-block;
margin:0 auto;
}
You have written .div parent seems to be an invalid selector, If you are trying to select a div with class parent, it should be selected using div.parent (Same applicable to your child div also).
Try this;
Apply diplay:table-cell; to .parent div, So that it will get the ability to align its child vertically middle.
then apply vertical-align:middle to the same to make the child elements vertically middle
div.parent{
width:100%;
height:100%;
text-align:center;
display:table-cell;
vertical-align:middle;
}
I know this post is old but here is another approach with Flex (also available in CodePen - http://codepen.io/KErez/pen/kXzYAj):
HTML:
<div class='a'>
<div class='b'>
Inner
</div>
</div>
CSS (the colors are just for showing the boxes clearly):
.a {
display: flex;
justify-content: space-around;
align-items: center;
color: #ffffff;
background-color: #223344;
width: 100%;
height: 100%;
}
.b {
display: flex;
justify-content: space-around;
align-items: center;
width: 75px;
height: 100px;
background-color: #999999;
color: #00ff00;
}
Very simple solution that I have used many times.
.a {
width: 300px;
height: 300px;
background-color:#666;
}
.b {
margin:auto;
width: 75px;
height: 100px;
top: calc(50% - 50px);
text-align:middle;
position: relative;
background-color:#111;
}
<div class='a'>
<div class='b'>
</div>
</div>
I have been trying to center this image inside its div, but it keeps aligning to the left.
HTML
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
I have tried using margin: auto; and align:middle; but neither seem to work.
No need for relative/absolute positioning.
A simple way to solve this is by setting display:block on the image.
jsFiddle demo - it works perfectly.
CSS
#main #right img {
margin: 0px auto;
display: block;
}
Try this:
HTML:
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS:
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
text-align:center;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
Jsfiddle: http://jsfiddle.net/hdMEQ/
I basically just added text-align: center; property in #right id.
Try adding:
#right img {
margin:auto;
display:block;
}
JSfiddle
Will get you the dead center with variable width and height or no need to know widths, heights.
set the position absolute in relative to which div you want the center the image
#main #right img {
position:absolute;
display: block;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
#right {
position:relative;
}
<style type="text/css">
.centerDiv {
margin-right: auto;
margin-left: auto;
width: 80px;
}
</style>
<div id="main">
<div id="left">This is a test</div>
<div id="right" class="centerDiv">
<div class="centerDiv">
<h2 id="fish">Fishtail</h2>
<img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
</div>
</div>
</div>
</body>
</html>