This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I've created a div in HTML:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
vertical-align: middle;
font-size: 20px;
height: 80px;
}
...
<div class="Div">
Just testing my Div.
</div>
...
Output:
I want the text to be in the middle of this rectangular, vertically and horizontally. How should I make it happen?
To be mentioned, I didn't use this div inside the main body, it's used inside another div; But in that i also have text-align: center;. I don't know if it's important; But i can provide more details about this code if needed.
P.S: I'm very new to css and html. Please accept my apologies if this code doesn't meet some standards.
There are several ways to do this. Since you, yourself tried to use vertical-align in the first place, so vertical-align will only work with display: table-cell;. In order to achieve it, you should set your div, display to table-cell and then you should also define a specific width for your div (I just went with 100vw to fill the available viewport).
So your final code should be something like this:
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
font-size: 20px;
height: 80px;
width: 100vw;
}
<div class="Div">
Just testing my Div.
</div>
But if you want some generic approach for this you should use flexbox instead. In order to use flexbox, you should define three specific properties to meet your requirement.
display: flex;. This will indicate your div as flex items and then their children should follow flex rules.
align-items: center;. This will indicate all of your items should align in the middle of your div horizontally.
justify-content: center;. This will indicate all of your items should align in the middle of your div vertically.
.Div {
border: 1px solid red;
margin: 1px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
You may use display: flex;, justify-content: center; and align-items: center in your class Div
You may go http://howtocenterincss.com/, to auto-generate the code that centre text, image or div.
.Div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 1px;
/* text-align: center;
vertical-align: middle; */
font-size: 20px;
height: 80px;
}
<div class="Div">
Just testing my Div.
</div>
I have a div-container (colored blue) where I want to put 3 div-elements (colored red).
div-elements have to be vertically aligned (I just used margin-top: 10%; for that) and first one has to be left, second centered and third right in the same line. To achieve that I have made 3 ids #left, #center and #right.
However it all gets messed up when I put those ids in. First one is aligned allright, second one is centered but margin-top: 10%; doesn't affect it anymore and the third one is on the right side but in the new line.
I have tried putting display: inline-block; in my div-element class. This aligns right element correctly but messes up the center one.
Why is this happening and how do I solve this?
It is quite obvious that I have tried How to align 3 divs (left/center/right) inside another div? since I have used exact same ids, but the above mentioned solution doesn't work here and I have specifically asked why my margin-top: 10%; in .div-element doesn't affect center div
.div-container {
width: 50%;
height: 50%;
background-color: blue;
}
.div-element {
margin-top: 10%;
width: 20%;
height: 50%;
background-color: red;
}
#center {
margin: 0 auto;
}
#left {
float: left;
}
#right {
float: right;
}
<div class="div-container">
<div class="div-element" id="left">Left</div>
<div class="div-element" id="center">Center</div>
<div class="div-element" id="right">Right</div>
</div>
I would suggest using flexbox for this:
.div-container {
width: 50%;
height: 50%;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.div-element {
margin-top: 10%;
width: 20%;
height: 50%;
background-color: red;
}
<div class="div-container">
<div class="div-element">Left</div>
<div class="div-element">Center</div>
<div class="div-element">Right</div>
</div>
One of the easiest way for me to do this would be to use CSS grid to position the columns
<style>
.div-container {
display:grid;
grid-template-column: 3, 1fr;
width: 50%;
}
</style>
Im trying to get an image to be in the same row as my text in my ABOUT section.
I've tried to wrap my <div class="portrait"> and <p> into a <div class="wrapper"> with css flex-direction:row
Heres a pen: https://codepen.io/anon/pen/MqRdjb
I think some CSS is being overwritten, or I'm not using my CSS properly.
Thanks for any and all help!!
flex-direction: row has no effect without including display: flex.
Adjust the wrapper css to:
.wrapper {
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
You can also refactor the margins for the elements inside the wrapper if you want to center them. Any vertical margins can be removed and applied to the wrapper itself.
.portrait{
width:100px;
height:150px;
margin-left: auto;
margin-right: 10px; /* Align your image right */
z-index: 1;
border-radius: 10%;
background-color:#555;
}
.ABOUT p{
font-size:1.2em;
text-align: center;
margin-right: auto; /* align text left */
}
I am trying to vertically align two divs in a parent div.
The vertical align is straightforward, but I am also trying float the divs, one left and one right.
Is this possible to do?
.outer {
background: red;
height: 300px;
display: flex;
align-items: center;
}
.inner_right {
background: blue;
float: right;
}
.inner_left {
background: yellow;
float: left;
}
<div class="outer">
<div class="inner_right">
RIGHT MIDDLE
</div>
<div class="inner_left">
LEFT MIDDLE
</div>
</div>
https://jsfiddle.net/xh8rbnmh/
body { margin: 0; }
.outer {
display: flex;
align-items: center;
justify-content: space-between; /* 1 */
background: red;
height: 300px;
}
.inner_right {
order: 1; /* 2 */
/* float: right; */ /* 3 */
background: aqua;
}
.inner_left {
/* float: left; */ /* 3 */
background: yellow;
}
<div class="outer">
<div class="inner_right">RIGHT MIDDLE</div>
<div class="inner_left">LEFT MIDDLE</div>
</div>
methods for aligning flex items on main axis
the flex order property can move elements around the screen
floats are ignored in a flex formatting context
Simple. You need to put your left div first in the markup. Then simply add margin: auto to the right div.
Note that if you need to retain the original markup (with the right div first, then the left div), flexbox allows you to order the divs using the intuitive order: property on each div.
I've updated the fiddle here: https://jsfiddle.net/v6facjnp/4/
This is alternative solution not using flexbox - noticed that margin has to be height of element.
.outer {
background: red;
height: 300px;
position:relative;
}
.inner_right {
background: blue;
position:absolute;
right:0px;
top:50%;
margin-top: -18px;
}
.inner_left {
background: yellow;
position:absolute;
top:50%;
left:0px;
margin-top: -18px;
}
First lets fix, some: left at the left, right at the right
<div class="outer">
<div class="inner_left">
LEFT MIDDLE
</div>
<div class="inner_right">
RIGHT MIDDLE
</div>
</div>
Second: Flex makes the elements to behave like blocks, discarding the float property. So we use margins and justify
.outer {
background: red;
height: 300px;
display: flex;
align-items: center;
justify-content:flex-end; //Move all items to the right
}
.inner_right {
background: blue;
}
.inner_left {
background: yellow;
margin-right:auto;//Move this to the left
}
I'm trying to vertically center a span or div element within another div element. However when I put vertical-align: middle, nothing happens. I've tried changing the display properties of both elements, and nothing seems to work.
This is what I'm currently doing in my webpage:
.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}
<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Here is a jsfiddle of the implementation showing that it doesn't work: http://jsfiddle.net/gZXWC/
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
This seems to be the best way - some time has passed since my original post and this is what should be done now:
.main {
display: table;
/* optional css start */
height: 90px;
width: 90px;
/* optional css end */
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
<div class="main">
<div class="inner"> This </div>
</div>
Try this, works for me very well:
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
Setting the line-height to the same height as it's containing div will align content in the middle vertically;
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner {
line-height:72px;
border: 1px solid #000000;
}
In case you cannot rely on flexbox... Place .child into .parent's center. Works when pixel sizes are unknown (in other words, always) and no problems with IE9+ too.
.parent { position: relative; }
.child {
position: absolute;
top : 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform : translate(-50%, -50%);
}
<div class="parent" style="background:lightyellow; padding:6em">
<div class="child" style="background:gold; padding:1em">—</div>
</div>
You should put vertical-align: middle on the inner element, not the outer element. Set the line-height property on the outer element to match the height of the outer element. Then set display: inline-block and line-height: normal on the inner element. By doing this, the text on the inner element will wrap with a normal line-height. Works in Chrome, Firefox, Safari, and IE 8+
.main {
height: 72px;
line-height:72px;
border: 1px solid black;
}
.inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="main">
<div class="inner">Vertically centered text</div>
</div>
Fiddle
I used this to align everything in the center of the wrapper div in case it helps anyone - I found it simplest:
div.wrapper {
/* --- This works --- */
display: flex;
/* Align Vertically */
align-items: center;
/* Align Horizontally */
justify-content: center;
/* --- ---------- ----- */
width: 100%;
height:100px;
background-color: blue;
}
div.inner {
width: 50px;
height: 50px;
background-color: orange;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
This is a modern approach and it utilizes the CSS Flexbox functionality.
You can now vertically align the content within your parent container by just adding these styles to the .main container
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; // To center align it horizontally as well
}
You can also use CSS Grids ( a two-dimensional grid-based layout system).
.main {
display: grid;
justify-content: center;
align-content: center;
}
Below is a Shorthand approach but browser support is still low - https://caniuse.com/?search=place-items.
.main {
display: grid; // flex - works for both
place-items: center;
}
And you are good to go!
HTML
<div id="myparent">
<div id="mychild">Test Content here</div>
</div>
CSS
#myparent {
display: table;
}
#mychild {
display: table-cell;
vertical-align: middle;
}
We set the parent div to display as a table and the child div to display as a table-cell. We can then use vertical-align on the child div and set its value to middle. Anything inside this child div will be vertically centered.
Here you have an example of two ways of doing a vertical alignment. I use them and they work pretty well. One is using absolute positioning and the other using flexbox.
Vertical Align Example
Using flexbox, you can align an element by itself inside another element with display: flex; using align-self. If you need to align it also horizontally, you can use align-items and justify-content in the container.
If you don't want to use flexbox, you can use the position property. If you make the container relative and the content absolute, the content will be able to move freely inside the container. So if you use top: 0; and left: 0; in the content, it will be positioned at the top left corner of the container.
Then, to align it, you just need to change the top and left references to 50%. This will position the content at the container center from the top left corner of the content.
So you need to correct this translating the content half its size to the left and top.
here is a great article of how to vetical align..
I like the float way.
http://www.vanseodesign.com/css/vertical-centering/
The HTML:
<div id="main">
<div id="floater"></div>
<div id="inner">Content here</div>
</div>
And the corresponding style:
#main {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#inner {
clear: both;
height: 100px;
}
It's simple. Just add display:table-cell in your main class.
.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}
Check out this jsfiddle!
Here is the latest simplest solution - no need to change anything, just add three lines of CSS rules to your container of the div where you wish to center at. I love Flex Box #LoveFlexBox
.main {
/* I changed height to 200px to make it easy to see the alignment. */
height: 200px;
vertical-align: middle;
border: 1px solid #000000;
padding: 2px;
/* Just add the following three rules to the container of which you want to center at. */
display: flex;
flex-direction: column;
justify-content: center;
/* This is true vertical center, no math needed. */
}
.inner {
border: 1px solid #000000;
}
.second {
border: 1px solid #000000;
}
<div class="main">
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Bonus
the justify-content value can be set to the following few options:
flex-start, which will align the child div to where the flex flow starts in its parent container. In this case, it will stay on top.
center, which will align the child div to the center of its parent container. This is really neat, because you don't need to add an additional div to wrap around all children to put the wrapper in a parent container to center the children. Because of that, this is the true vertical center (in the column flex-direction. similarly, if you change the flow-direction to row, it will become horizontally centered.
flex-end, which will align the child div to where the flex flow ends in its parent container. In this case, it will move to bottom.
space-between, which will spread all children from the beginning of the flow to the end of the flow. If the demo, I added another child div, to show they are spread out.
space-around, similar to space-between, but with half of the space in the beginning and end of the flow.
Since vertical-align works as expected on a td, you could put a single celled table in the div to align its content.
<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</div>
Clunky, but works as far as I can tell. It might not have the drawbacks of the other workarounds.
Just put the content inside a table with height 100%, and set the height for the main div
<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>
To vertically center a span or div element within another div, add position relative to parent div and position absolute to the child div.Now the child div can be positioned anywhere inside the div.Example below centers both horizontally and vertically.
<div class="parent">
<div class="child">Vertically and horizontally centered child div</div>
</div>
css:
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
set below CSS
/*Parent*/
display: table;
/*immediate child*/
display: table-cell;
vertical-align: middle;
~Rahul Daksh
THIS IS THE ANSWER:
vertical-align aligns elements relative to the dimensions of the line the element appears in.
reference: https://christopheraue.net/design/why-vertical-align-is-not-working
The question was "WHY?".
The answer: vertical-align only works in certain conditions
in the "display: table-cell;"