the title pretty much sums it up. I have the following code:
<div class="container">
<p>Hello world</p>
</div>
And CSS:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle; /* Why you no work!?!? */
}
But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?
Thanks!
if you have single line text add this to your css.
.container > p{
line-height:50px;
}
To use vertical-align: middle, you need to use display: inline-block.
Your code will change to this:
.container{
display: inline-block; /* This is the line you need to introduce */
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle;
}
You can take a look at the demo.
Update
Using display: table for .container and display: table-cell for .container p makes it work.
Updated demo
.container{
display: table;
width: 100%;
height: 200px;
background-color: lightblue;
vertical-align: middle;
}
.container p {
display: table-cell;
vertical-align: middle;
}
Vertical alignment in CSS is not as straightforward as horizontal alignment.
Depending on your case and the content you need to apply one technique or another.
You can check this link for different techniques:
http://www.vanseodesign.com/css/vertical-centering/
In short, vertical-align: center; is not going to work in your case
Add to your container the display property as follows:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
display:inline-block;
vertical-align: middle;
}
Related
W3School says :
When we use vertical-align:middle; The element is placed in the
middle of the parent element
So I tried to do that, But didn't get desired outcome
CODE :
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
vertical-align: middle;
}
p {
vertical-align: middle;
}
<div>
text
<p>
yo bro
</p>
</div>
Why m I not getting the desired outcome ?
because vertical-align only applies to inline level and table-cell elements. Both div and p are block level elements.
Applies to inline-level and table-cell elements. It also applies to
::first-letter and ::first-line.
MDN Source
With that in mind and using your example make your div a table and your p a table-cell
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: table
}
p {
vertical-align: middle;
display: table-cell;
}
<div>
<p>
yo bro
</p>
</div>
NOTE: Don't trust W3Schools as source, instead use MDN or W3C Specs
There are a couple of problems with your posted code.
Firstly, you haven't really explained what your desired outcome is so it's hard to help you with your specific problem.
Assuming you want to align the paragraph text with the other text in the div, you'll have to add display:inline-block; to your paragraph. Then, the trick with vertical aligning is to use line-heightas well as height. Set them both the same and voilá, things line up nicely.
div{
height: 200px;
width: 500px;
line-height:200px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
display:inline-block;
padding:0;
margin:0;
}
codepen here
Add to div in css display: table-cell ;
div {
display: table-cell;
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p {}
try using, line-height in styling, as shown below, or fiddle link
div{
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
/* vertical-align: middle; */
line-height: 100px;
}
<div>
text
<p>
yo bro
</p>
</div>
If you wanted to use FlexBox you could do it this way.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
This makes things centred both ways. If you want it just to be the height then delete justify-content. Note that you need to do flex-direction: column in this example to make the content go down the page and not sit side-to-side.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div>
yo
<p>bro</p>
</div>
I did little boxes on my website to shortly describe our activity, The text is that the same length for all the boxes so I am trying to center the text in the middle of the box with my css. I tried display:table-cell, vertical-align:center, but it doesn't work.
Did someone has an idea about what I can do?
Thank you :)
You need to add display: table; to the text container and
display: table-cell;
vertical-align: middle;
text-align:center;
to your text span/h1/p
body {
width: 100%;
height: 100%;
}
div {
position: absolute;
height: 50%;
width: 50%;
display: table;
background: blue;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<body>
<div>
<h1>Text</h1>
</div>
</body>
You need to add your code and be very specific about the question next time.
In css,
.text-center {
text-align : center;
}
Add a class .text-center to you div.
This is what Ihave so far:
http://jsfiddle.net/yisera/2aVpD/
There's a div I need to center vertically inside the .jumbotron-special container.
I tried using display: table; on he parent element and then use display:table-cell on the child element (the one with the H1 and H2) but so far no luck and I've ran out of ideas. I do not want to use absolute positioning since This needs to be responsive, and as the resolution goes smaller, the layout goes astray.
Any ideas how can I center it to the jumbotron parent div?
You can use the following code the contents of the div .jumbotron-special
add the following properties to the class
display:flex;
justify-content:center;
align-items:center;
Working Code:JSFIDDLE
More on Flex Box
Read More on Flex here
Try this:
#yourdiv {position:absolute; top:50%; height:800px; margin-top:-400px; }
Where margin-top is negative half of height.
Or, another effective method with 2 divs:
<div id="controller-div">
<div id="your-div">
Content here
</div>
</div>
Where, again with margin-bottom negative half of height:
#controller-div {float:left; height:50%; margin-bottom:-120px;}
#your-div {clear:both; height:240px; position:relative;}
This here also works fine (you just missed to add height:100%)
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
display: table;
width: 100%;
height: 100%;
}
.inner-container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's another option that has a bit more support than flexbox.
Updated Fiddle here.
body{
width: 100%;
height: 100%;
}
.full-jumbotron{
font-size: 10em !important;
margin-top: -70px;
height: 100vh;
background: #333;
min-height: 100%;
max-height: 100%;
}
.container-text{
color: #fff;
text-shadow: #333 3px 3px;
height: 100%;
display: table;
width:100%;
}
.inner-container {
display: table-cell;
vertical-align: middle;
width:100%;
}
live: http://jsfiddle.net/8hAv3/
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
vertical-align: middle;
}
<div id="main">
<div id="sub">TEXT</div>
</div>
Why in this example vertical-align not working? How can i make it? I dont want use margin, padding and set height in px. Is this possible?
This should work:
#main {
width: 100px;
height: 100px;
background-color: red;
display: table;
}
#sub {
display: table-cell;
height: 100%;
width: 100%;
background-color: blue;
vertical-align: middle;
}
http://jsfiddle.net/8hAv3/2/
if you just want to vertically center text in a fixed height box I would use line-height:100px to do it
you have to use a
display:table-row;
display:table-cell; or
display:table;
along with the vertical-align style, not sure which exact display value it has to be but it needs to be one of the table ones.
You need to use display:table on the main container and display:table-cell on the child. Illustrated here: http://jsfiddle.net/8hAv3/1/
You have to give the element #sub a line height, otherwise the browser doesn't know how high it is to vertically align it.
Just give the div a line-height.
#main {
width: 100px;
height: 100px;
background-color: red;
}
#sub {
width: 100%;
height: 100%;
background-color: blue;
line-height:100px;
}
Fiddle
This solution does not use display:table and display:table-cell as display:table and display:table-cell are not browsers friendly, some older browsers do not support
I mean by not using any other tags...just one tag and the CSS for it.
So
http://jsfiddle.net/EqTsu/
<style>
#test{
width: 100px;
height: 100px;
text-align: center;
border: solid 1px #ff0000;
}
</style>
<div id='test'>foo</div>
needs what to center vertically?
Per Answers Below
It needs
display: table-cell;
vertical-align: middle;
There's a sort of hack-ish work-around where you give the <div> the display: table-cell; property and then the vertical-align: middle; property, yes.
So the complete CSS would be:
#test{
display: table-cell;
vertical-align: middle;
width: 100px;
height: 100px;
text-align: center;
border: solid 1px #ff0000;
}
Also, external stylesheets are your friends.
Here's a jsFiddle using your code:
http://jsfiddle.net/EqTsu/2/
Adding display: table-cell; will cause the element to be treated like a cell in a table, which then enables you to use the table formatting CSS vertical-align: middle;.
Understanding vertical-align, or "How (Not) To Vertically Center Content"