This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 8 years ago.
i have the code below. I can't get it to align in the center of the division. Pls, may i have some advice? Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
}
</style>
</head>
<body>
<div class="center">How to get this text aligned in the center?</div>
</body>
</html>
You need the line-height and vertical-align: middle properties.
height:100px;
line-height: 100px;
vertical-align: middle;
To elaborate what #Leo said, here is the code for multiple lines:
FIDDLE
.centered {
height: 400px;
display: table-cell;
vertical-align: middle;
}
If you need to center the multiline text. then use display: table-cell; check DEMO.
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: table-cell;
vertical-align:middle;
}
Update:
If you are supporting only latest browser than you can also use CSS3 Flex Property. Check DEMO.
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align Vertical */
}
use vertical-align
DEMO here
.center {
margin: auto;
width: 70%;
height:100px;
background-color: yellow;
text-align:center;
vertical-align: middle;
line-height: 100px;
}
if multiple lines are there you should use
display:table-cell
DEMO
If the height is fixed, use the same value for line-height.
height:100px;
line-height: 100px;
vertical-align: middle; is not required.
However, if the height is dynamic, use:
display: table-cell;
vertical-align:middle;
Related
I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"
Thanks in advance.
.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}
.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}
.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}
.plan:last-child {
float: right;
}
.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}
<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>
Vucko's answer is correct. I wanted to add a comment, but since I don't have enough reputation yet, I'll just post it as an answer.
You can use the vertical-align property on the inner div that needs centering. This property only works on elements that have display:inline-block or display:table. Refer to the actual spec here.
Repeating Vucko's answer:
.options {
display: inline-block;
vertical-align: middle;
}
You can use inline-block instead of float, and than you can use the vertical-align property:
.plan-container>div{
display: inline-block;
vertical-align: middle;
}
JSFiddle
However, beware of the whitespace issue.
Try it-
.plan-container {
display: flex;
flex-wrap: wrap; /* optional. only if you want the items to wrap */
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
as said in the title all i need is centering vertically a title h1 in the middle of a div.
this is a very simple code :
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}
h1{
vertical-align:middle;
}
This is a demo here
After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please
What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?
Solution #1
Add display:table; to container and display:table-cell; to h1
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display:table; /* <---- */
}
h1{
vertical-align:middle;
display:table-cell; /* <--- */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: table;
}
h1 {
vertical-align: middle;
display: table-cell;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #2 : Flexbox
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display: flex;
align-items: center; /* align vertical */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
/* align vertical */
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #3 - Transforms
h1
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #4 Add a Pseudo element with 100% height
.container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
/* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Center Text Vertically Within <DIV>
(7 answers)
Closed 8 years ago.
<div style="background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 125px; min-width: 125px; text-align: center; vertical-align: middle;">
<span style="color: #FFF; font-weight: bold;"><xsl:value-of select="txtQuote" /></span>
</div>
Displays this:
How can I modify the CSS, so the quote is always centered within the background image
Try this:
<div class="bubble">
<p>blablabla</p>
</div>
.bubble {
position: absolute;
background: #cccccc;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
here is a fiddle: http://jsfiddle.net/hLwzymmL/
It depends whether you want to center horizontally or vertically:
Horizontally you should give these styles to the object:
For text only:
#parent {
text-align: center;
}
For objects other than text:
#child {
margin-left: auto;
margin-right: auto;
}
or:
#child {
margin-left: 0 auto;
}
Vertically it's a bit more difficult, you have to set display: table to the parent and display: table-cell to the child, so that you can set the style vertical-align: middle to the child.
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
JSFiddle demo
You can simply set your outter container to have display:table; and your inner container to have display:tabe-cell;
div{
display:table;
text-align: center;
}
span{
display:table-cell;
vertical-align: middle;
}
vertical-align: middle; only works on table elements.
demo - http://jsfiddle.net/victor_007/hLwzymmL/1/
.bubble p {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Do it like this:
HTML markup:
<div class="wrapper">
<span class="middleelement">This is some text..</span>
</div>
CSS:
div.wrapper {
background: #008000;
background-size: 100% 100%;
text-align: center;
display: table;
width: 100%;
height: 285px;
}
.middleelement {
color: #FFF;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
Se the demo here:
http://jsfiddle.net/e16uhcrz/2/
I have two DIVs inside a parent div. I want them to be:
So I searched for examples of this because it is such a trivial problem. I tried a few examples from SO but it didn't seem to make any difference for my example. I tried vertical-align: middle; and inline-block but without any success. Here is my fiddle.
http://jsfiddle.net/Sz2fU/1/
HTML
Play A
CSS
.parentBox
{
height: 100px;
}
.left_box
{
display: inline-block;
vertical-align: middle;
background:green;
float:left;
}
.right_box
{
width: 18%;
height: 100%;
display: inline-block;
vertical-align: middle;
background:blue;
float:right;
}
.inputBox
{
height:80px;
}
In order for vertical-align to work in a table we will have to use table-cell
Try this:
Add display:table; and width:100%; to .parentBox
Remove float from .left_box and .right_box
Add display: table-cell; and text-align:center; to .left_box and .right_box
You needed to add text-align:center; to center the input to the middle.
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
The trick here is to use display: table for the parent div and display: table-cell for the children; otherwise, vertical-align is not respected.
JSFiddle: DEMO
.parentBox {
width: 100%;
height: 100px;
border: 1px solid lime;
display: table;
}
.left_box,
.right_box {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.left_box {
background:green;
}
.right_box {
width: 18%;
height: 100%;
background:blue;
}
.inputBox {
height:80px;
}
Add line-height: 100px to the parent div. Vertical-align:middle refers to line-height, so setting it up to the height of the block will do the job. Just don't forget to reset line-height to normal on children (otherwise, they will be with line-height: 100px too and if text in it more than one line you get huge block).
I am trying to center 3 boxes in the middle of my container. However, I cannot get it working.
What am I doing wrong?
HTML
<div id="boxes">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: blue;
}
JSFiddle with the problem: http://jsfiddle.net/3cUF5/
If you need a crossbrowser solution, then use display: inline-block for inner boxes and align with text-align: center on parent.
Example fiddle: http://jsfiddle.net/RhBEz/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
text-align: center;
}
#boxes .box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
A second approach is using display: flex, but this will work only on recent Chrome and Firefox:
Example: http://jsfiddle.net/2mxET/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
display: flex;
justify-content:center;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
Using float: left on .box means they cannot be centered. You also needed to add text-align: center to #boxes
Please see a working version here http://jsfiddle.net/s455x/
Just add margin:0 auto; for #boxes
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
margin-left:auto;
margin-right:auto;
}
Now your outer container #boxes is aligned to center
http://jsfiddle.net/3cUF5/2/
#boxes {
text-align: center;
}
#boxes .box {
float: left; /* removed this line */
display: inline-block;
}
When you're trying to center elements, it's not a good idea to use floats. You have two basic options when centering elements.
do display: inline-block; to the child elements, and text-align: center; to the parent element
or
do display: block; to the element you want centered, as well as margin: 0 auto;
Not sure what browsers' you are trying to support but FlexBox makes this super easy, and if non-supported browsers are a requirement then you can just provide a fallback that works.