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.
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 2 years ago.
Here is an example:
I would like for the width of the h1 or a surrounding div to "clip" the text so that I can, for example, draw a border around only the text.
Just make the header element an inline element by giving it a display attribute of inline or inline-block:
h1 {
border: 3px dotted black;
display: inline-block;
}
<h1>Title</h1>
Alternatively, you can make the surrounding element have width: fit-content, though note that this is not supported in Internet Explorer:
.container {
width: fit-content;
}
h1 {
border: 3px dotted black;
}
<div class="container">
<h1>Title</h1>
</div>
Just set the element style to display:inline or display:inline-block
.index-header {
display: inline
}
This question already has answers here:
block <a> inside inline <li> behaviour
(1 answer)
Is it wrong to change a block element to inline with CSS if it contains another block element?
(9 answers)
Closed 2 years ago.
See example at https://jsfiddle.net/x7znc405/1/
If I have html like
<div id="wrapper">
<a>
<div id="content">
Hello World
</div>
</a>
</div>
css
#content {
background-color: blue;
width: 100%;
height: 100%
}
a {
width: auto;
height: auto;
}
#wrapper {
display: inline-block;
height: 39px;
width: 200px;
}
The a tag appears to not have any effective width or height. I can click on it in a browser, and it works fine.
The reason I care is that it means I have to use force:true to convince Cypress that the tag is visible and can be clicked, which obviously opens me up to issues where the tag is genuinely invisible.
Is there any way of me getting the a to 'grow' to fill the parent div?
a tag is inline-element and width and height will not be effective on inline-elements.
So, to add width or height you can set the display property of a tag to inline-block or block as required.
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.
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I'd like to know the reason why it aligns differently when there is text or any other element inside the div with display: inline-block? I know vertical-align fixes it, but I am curious to know how the browser determines to display like that.
div {
width: 100px;
height: 100px;
background: #dd6b4d;
display: inline-block;
/* vertical-align: top; */
}
.inner {
width: 50px;
height: 50px;
background: green;
}
<html>
<body>
<div></div>
<div>aaa</div>
<div>
<div class="inner"></div>
</div>
</body>
</html>
The default value of vertical-align (if you declare nothing), is
baseline
Unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block.
For reference, here is the article on CSS-Tricks
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;
}