This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
The code:
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
As it renders now, the span is align the bottom-left corner of the div.
See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.
(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)
At your parent DIV add
display:table;
and at your child element add
display:table-cell;
vertical-align:middle;
Quick answer for single line span
Make the child (in this case a span) the same line-height as the parent <div>'s height
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
You should then add the CSS rules
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }
Or you can target it with a child selector
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }
Background on my own use of this
I ran into this similar issue where I needed to vertically center items in a mobile menu. I made the div and spans inside the same line height. Note that this is for a meteor project and therefore not using inline css ;)
HTML
<div class="international">
<span class="intlFlag">
{{flag}}
</span>
<span class="intlCurrent">
{{country}}
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS (option for multiple spans in a div)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
In this case if I just had one span I could have added the CSS rule directly to that span.
CSS (option for one specific span)
.intlFlag { line-height: 42px; }
Here is how it displayed for me
As in a similar question, use display: inline-block with a placeholder element to vertically center the span inside of a block element:
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>
Vertical alignment is only applied to inline elements or table cells, so use it along with display:inline-block or display:table-cell with a display:table parent when vertically centering block elements.
References:
CSS Horizontal and Vertical Centering
To the parent div add a height say 50px. In the child span, add the line-height: 50px;
Now the text in the span will be vertically center. This worked for me.
Related
This question already has answers here:
Margin top in inline element
(2 answers)
Why margin top and bottom is missing? [duplicate]
(4 answers)
Closed 9 months ago.
.case1 {
margin-bottom: 10px;
}
.case2 span {
margin-bottom: 10px;
}
<div class="case1">
<span>something</span>
</div>
<div class="case2">
<span>something</span>
</div>
If apply css as follows, the result you see on the screen is the same. So, which of the two methods is best practice and why?
thx answers. If it is a p element and not a span element, the result is likely to be the same. What is the best practice in this case?
<div>'s and <p>'s for example are Block Level elements that can take up margin on all sides. <span>'s cannot as it's an Inline element that takes up margins horizontally only.
From W3:
Margin properties specify the width of the margin area of a box. The
'margin' shorthand property sets the margin for all four sides while
the other margin properties only set their respective side. These
properties apply to all elements, but vertical margins will not have
any effect on non-replaced inline elements.
You can set display: inline-block; on your span to make it block-level.
.case1 {
margin-bottom: 10px;
}
.case2 span {
margin-bottom: 10px;
margin-top: 20px; /* margin doesn't work */
color: hotpink;
}
.case3 span {
display: inline-block; /* made it block-level, margin works */
margin-top: 40px;
color: blue;
}
<div class="case1">
<span>something</span>
</div>
<div class="case2">
<span>something</span>
</div>
<div class="case3">
<span>something</span>
</div>
By architecture, the styles of the span tag are still children of the parent div and not all children are equal to the parent, a clear example is:
If I have a parent div with style color:#333, all the children, including the span ones, will inherit this color. Otherwise, if the child wants another color, be it span or another label, you use the second option. This applies even in margins.
In any case you'd prefer to use case 1 because case 2doesn't work if there are other elements in the <div>
p{
margin: 0px;
padding: 0px;
}
.case1 {
margin-bottom: 15px;
}
.case2 span {
margin-bottom: 15px;
}
<div class="case1">
<span>something</span>
<p>
test
</p>
</div>
<div class="case2">
<span>something</span>
<p>
test1
</p>
</div>
<p>
test2
</p>
As you can see there is no separation between test1 and test2 because case2 doesn't affect it. But there's a sepration between test and the something from case 2
Why when I specify a width property in my p element, the text doesn't flow around the div element ?
I know one the solution to this is to have float: left; in my p element too. Just looking for explanation, not finding for solution
div {
width: 200px;
height: 100px;
background-color: green;
opacity: 0.2;
float: left;
}
p {
background-color: yellow;
width:10px;
}
<div></div>
<p>Lorem Ipsum</p>
Block elements don't wrap around floats, their contained line boxes do. But since the width of the p element is less than that of the div element, there's no space for the line boxes of the p element to go beside the div element, so the first opportunity for the line box to be placed is below the div element. So wrapping around is exactly what the line box of the p element is doing.
It's probably a display issue.
You can try to set a display:inline-block to your <p> tag.
But I think to put one aside another you can better use flex-box:
Wrap your two or more elements inside a div or a section, and give this div a property display: flex.
By default, it will align those elements horizontally, and the property align-items: center is to align those elements based on the div's center.
<div id="container">
<div>One</div>
<p>Another</p>
</div>
<style>
#container {
display: flex;
align-items: center;
}
#container div {
/* ... Your previous div style */
margin-right: 15px;
}
</style>
This question already has answers here:
Vertical align not working on inline-block
(3 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
HTML
<html>
<head>
<style type="text/css">
div {
height: 300px;
width: 300px;
background-color: aqua;
margin-bottom: 10px;
}
div > span {
vertical-align: middle;
background-color: orange;
font-size: 3em;
}
</style>
</head>
<body>
<div>
<span>Hello!</span>
</div>
</body>
</html>
In the image below, Actual is what the HTML above renders, and Expected is the layout I need.
Is the CSS property vertical-align supposed to work this way?
Edit :
This question is not a duplicate, I'm trying to understand the behavior of vertical-align: middle with inline elements. In the case above, keeping or removing the above property value has no effect on the HTML layout.
Edit2 :
The demo under the heading "A more versatile approach" presented in the top answer of the duplicate question suggested in the comments presents a different layout in my browser. I'm running Google Chrome Version 47.0.2526.106 (64-bit).
Here's a snaphsot of how it looks in my browser (different from what it looks on the demo link):
In the image below, the span element is glued to the top.
vertical-align aligns the inline elements with each other, it doesn't position them within their container.
So if for example you have a taller vertical-align: middle inline element in the same div, the "Hello" will be centred relative to it:
div {
height: 300px;
width: 300px;
background-color: aqua;
margin-bottom: 10px;
}
div > span {
vertical-align: middle;
background-color: orange;
font-size: 3em;
}
.big {
font-size:200px;
}
<div>
<span>Hello!</span>
<span class="big">B</span>
</div>
There are several techniques for centring text vertically in a container but this is not one - see How do I vertically center text with CSS?
https://jsfiddle.net/x0gc91ch/1/
add line-height: 300px
to the div css, because you are trying to align to the middle of the default line-height, which isn't as tall as your parent div.
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 7 years ago.
I have this code:
<div style="font-size: 1.5rem; width: 20%;vertical-align: middle;" >ABC</div>
When I look at the page it shows like this. I added x's to show the boundary of the DIV:
xxxxxxxxxxxxxxx
x x
x ABC x
x x
x x
xxxxxxxxxxxxxxx
It seems like the vertical-align is not doing anything.
Is there I can make it so that the space above and below the ABC is the same. I saw CSS tables and Flex. Is there a way I can do it with standard CSS or do I need to use something like CSS tables or Flex?
Used to display property as like this
display:table-cell;
-
<div style="font-size: 1.5rem;border:solid 1px red; height:100px; width: 20%;display:table-cell;vertical-align: middle;" >abc</div>
There is one way to solve this without display: table; and display: flex. It's a bit tricky, but works ok.
To start with, your snipped does not work like this, because the vertical-align property applies to inline and table-cell boxes only. A <div> is display: block by default and therefore out of scope.
So, what can we do? This:
.vertical-align-content
{
height: 150px;
background-color: silver;
}
.vertical-align-content > span,
.vertical-align-content::before
{
display: inline-block;
vertical-align: middle;
}
.vertical-align-content::before
{
height: inherit;
content: "";
}
<div class="vertical-align-content">
<span>Hello</span>
</div>
This solution is placing a pseudo element insde of .vertical-align-content with the height inherited of the parent container. The pseudo element and the <span> are both set to display: inline-block and can therefore be positioned using vertical-align. The biggest item (the pseudo element) will force the span to be aligned vertically centered to itself.
you can try this one:
<div style="display: table; height: 300px; overflow: hidden;display: table-cell; vertical-align: middle;">abc</div>
DEMO HERE
Why not just use line-height?
Fiddle: http://jsfiddle.net/SVJaK/2757/
<div class="test">ABC</div>
CSS:
.test {
border: 1px solid green;
width: 200px;
line-height: 200px;
}
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:
float: left;
clear: none;
As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.
How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?
If I understand your question correctly, something like this is what you want to have. And of course there are more than one ways to skin a cat.
HTML:
<div class="centerpanel">
<div class="left">L</div>
<div class="right">R</div>
<div class="clearfix"></div>
</div>
CSS:
.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.centerpanel div{
width: 50%;
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix{
clear: both;
}
jsFiddle: http://jsfiddle.net/nfpdpmze/2/
Since there are only two divs here, you could also set them display: inline-block without using any flotation.
Side note:
There are of course more modern ways of clearing floating. One of them is by setting up the overflow property on the container of the divs that get floated. More about that here: https://css-tricks.com/all-about-floats/
You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.
HTML:
<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>
CSS:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}
Here you go:
<div style="display:flex">
<div style="text-align:center">
<span>Content1</span>
</div>
<div style="text-align:center">
<span>Content2</span>
</div>
</div>