This question already has answers here:
Why does inline-block cause this div to have height?
(7 answers)
Closed 2 years ago.
I've run into an interesting problem with line-height.
.text {
font-family: sans-serif;
font-size: 11px;
line-height: 12px;
}
.container {
display: flex;
}
<div class="container">
<div class="text-container"><span class="text">Hello</span></div>
<span class="text">Hello</span>
</div>
In this fiddle above there are 2 spans, both with font-size and line-height set, inside a flex container. One of the spans is inside a div and the other one isn't.
The spans themselves have a height of 12px, but the div has a height of 18px, causing the two spans to be out of line. If I add line-height: 0; to the div, then the problem is fixed and the div is 12px tall.
The spans must be on the same line, and one of them must be inside a container. display: block works, but for my purposes this element needs to be inline for certain use cases.
What's causing the div to have this extra height, and is there a nicer solution than having to set line-height: 0; on the div?
I found the answer here. It's to do with how line-height is calculated for inline elements. I've fixed it by setting font-size: 0; on the div containing the span.
The display on the span elements are different. The one inside the div has a display: inline, while the span standalone is display block. If you would like them to react the same, simply put a display on the element.
If you set line-height: 12px; on the container it kind of works. But if you look closely there is still a small space.
.text {
font-family: sans-serif;
font-size: 11px;
line-height: 12px;
}
.container {
display: flex;
line-height: 12px;
}
<!DOCTYPE html>
<body>
<div class="container">
<div class="text-container">
<span class="text">Hello</span>
</div>
<span class="text">Hello</span>
</div>
</body>
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
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:
CSS Width / Max-Width on Line Wrap?
(3 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
I have some text inside a div.
The parent of the div that holds the text has a specific width and display: flex;
I want the width of the container that holds the text to be as wide as its longest textline (in the fiddle this would be the line "WordyWords in").
I know this can be done by: display: inline, but this only works, when the parent does not have display: flex anymore.
.width{
width: 150px;
display: flex;
}
.text{
font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
.width2{
width: 150px;
}
.text2{
font-size: 20px;
line-height: 20px;
display: inline;
background-color: red;
}
This is what I have
<div class="width">
<div class="text">Veryvery long WordyWords in here</div>
</div>
<br>
This is kind of what I want, but I want to keep the <span style="background-color: #f2f2f2">display: flex;</span> attribute in the parent
<div class="width2">
<div class="text2">Veryvery long WordyWords in here</div>
</div>
Like shown in the picture, I would like the div .text to end right after the letter of the longest textline like display: inline does this. (The red line is where the .text div should end.) But I want to keep display: flex property on my parent. Is this even possible with flex set on the parent?
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.
HTML is
<div class="jfmfs-friend-container">
<div class="jfmfs-friend ">
<input class="friend-checkbox" type="checkbox">
<img src="/picture">
<div class="friend-name">Test User</div>
</div>
</div>
Here I am able to achieve all three elements checkbox, img and friend-name div in a single line. I am looking for following:
checkbox and friend-name in verticall middle to the img.
Word wrap in the friend-name div
All elements with equal distance (atleast 5px) to each other. Right now all 3 are adjacent to each other with no space
Here is my CSS. I am giving css code for the parent div incase of any display:block property:
.jfmfs-friend div {
color:#111111;
font-size:11px;
overflow:hidden;
display:inline-block;
}
div.friend-name {
margin-left: 10px;
vertical-align: middle;
word-wrap: break-word;
}
.friend-checkbox {
position: relative;
vertical-align:middle;
display: inline-block;
}
#jfmfs-friend-container {
overflow:scroll;
overflow-x: hidden;
-ms-overflow-x: hidden;
width:100%;
height:400px;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
color: #333;
font-size: 12px;
}
Demo: http://jsfiddle.net/55twK/
Set vertical-align:middle to all three elements, now you miss img.
Now all three elements works like inline elements and if there will be more text div can wrap itself to the new line. So one of the options is to set width or max-width to the div.
Horisontal margins and paddings works fine for inline elements.
To center your elements in the "jfmfs-friend" div, you need to add this css:
div.jfmfs-friend {
text-align: center;
}
To make the word-wrap in your "friend-name", you need to set the width. Currently it will expand to the size of it's parent. Setting the width of the "friend-name" dive or one of it's parent containers will cause the text to break when it meets the edge of the element.
To get your elements to be separated from eachother, you need to play with the padding and margin css properties until you get the desired effect. Adding a padding of 5px to each element would probably do what you want.
.friend-checkbox, img, .friend-name {
padding: 5px;
}
You can use jsfiddle.net to tweak your layout and get a live preview. This will help you get the spacing you desire.
Also, check out these references on the padding and margin properties.