I'm having an issue getting a spans' inner text to be vertically centered on Firefox
Here's a screenshot of the firefox devtools highlighting the span element.
This Works as expected on Chrome and Safari.
<button
style={{ marginTop: this.state.marginTop }}
className={`info-tab-title`}
>
<img
className="tab-icon"
src="/images/neighborhood/train.svg"
alt="train icon"
/>
<span>TO BROOKLYN</span>
</button>
.info-tab {
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
background-color: #e5e8ea;
padding: 2% 4% 4% 4%;
margin-bottom: 8px;
cursor: pointer;
height: 100%;
max-height: calc(16.67% - 6px);
transition: 0.25s max-height ease-in-out;
&:last-child {
margin-bottom: 0;
}
.info-tab-title {
display: flex;
flex-direction: row;
align-items: flex-start;
font-family: 'BrownStd Regular';
font-size: 16px;
font-weight: bold;
letter-spacing: 0.35px;
line-height: 16px;
min-height: 26px !important;
align-items: center;
#media #{$mobile-break} {
font-size: 14px;
}
.tab-icon {
margin-right: 2.5%;
height: 100%;
width: auto;
}
}
}
Ideally, the text would be vertically centered inside the span.
This is not a duplicate, the suggested answers are all addressing aligning two elements in a parent. This is referring to a browser specific problem with aligning the innerHTML content of a span.
You are doing all right. Font metrics of BrownStd cause this issue. The distance from symbol baseline to bottom of font content area is bigger than distance to top.
Not sure you can perfectly align text and icon without some tricks like negative margins or absolute positioning.
You can read this article about font metrics, it's pretty hard to understand.
button {
display: inline-flex;
align-items: center;
padding: 10px;
height: 50px;
border: 1px solid;
}
div {
margin-right: 10px;
width: 25px;
height: 25px;
background-color: red;
border-radius: 50%;
}
span {
background-color: blue;
font-family: sans-serif;
color: white;
}
<h1>Nice font —</h1>
<button>
<div></div>
<span>nice vertical alignment</span>
</button>
Codepen demo with custom BrownStd font.
If by "innerHTML content of a span" you're referring to the bounding box of the text, I believe the only way to manipulate that in CSS is via line-height, and you can't change how the text is aligned within its line-height.
In this case, I would try reducing the line-height to the exact height of the text, and then align-items: center on the parent should work.
Related
I’m trying to create resizing buttons using CSS. Here’s what I have so far (onclick handlers will come later).
It’s almost correct, except the text in the last button (just a hyphen), isn’t centered vertically. The first two buttons are vertically centered as intended, but not the last button.
Can anyone see what I’m doing wrong? I’m guessing it might something inherent in the way the dash character is designed in this font. It that’s the case, can anyone suggest a better Unicode dash character that would properly align vertically?
body {
background-color: Aqua;
}
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
display: block;
font-size: 200%;
}
.button div {
vertical-align: middle;
font-weight: 800;
}
.button:not(:last-child) {
margin-bottom: .4cm;
}
<body>
<div style="text-align:center">
<h1>Resizer Buttons</h1>
<span class="button"><div>+</div></span>
<span class="button"><div>×</div></span>
<span class="button"><div>–</div></span>
</div>
</body>
Try <span class="button"><div>−</div></span> for the last button. Also, when I tried your code in my computer the text in the buttons didn't center vertically and I changed the display property of button class to flex. You might want to consider doing that as well.
A note first: In the snippet you posted, also the first two button's contents are not properly center-aligned vertically.
BUT: If you add display: flex; flex-direction: column; justify-content: center; to the CSS rule for .button, the alignment works as intended.
This changes the display property from block to flex, in this case "vertical flex" (i.e. flex-direction: column) and (vertically) centers the contents using justify-contents: center
body {
background-color: Aqua;
}
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
font-size: 200%;
display: flex;
flex-direction: column;
justify-content: center;
}
.button div {
font-weight: 800;
}
.button:not(:last-child) {
margin-bottom: .4cm;
}
<div style="text-align:center">
<h1>Resizer Buttons</h1>
<span class="button"><div>+</div></span>
<span class="button"><div>×</div></span>
<span class="button"><div>–</div></span>
</div>
You could use display:flex for the button instead of block. Then you can use align-items:center and justify-contentcenter` like this:
.button {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 200%;
}
You will need to work with the minus symbol for your last button because it doesn't play well with the alignment. Sunay's suggestion sounds like a good alternative.
I need center to center some text on X and Y axes. I noticed that my text is not on full height, which is best solution to give text full height?
I tried to center with:
1. Line height
2. Transform
3. Flex
4. Table - table cell - vertical align
HTML:
<div class="block">
<p> 3 </p>
</div>
SCSS:
.block {
display: table;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
What I meant with full height
This height really matter, for Small font it's not visible but with
Large font it's really un-centered.
I expect to center this text.
I think flex is the best and universal method to center element on X and Y, so add
display: flex;justify-content: center;align-items: center; to you parent block. After that you can use anyone font-height what you want.
.block {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
}
p {
line-height: 20px;
}
<div class="block">
<p> 3 </p>
</div>
I found the problem, un-alignment was caused by font family, in my case I used Helvetica, after change text alignment fixed.
https://giphy.com/gifs/SYFl4xIvOdFS6e8X9q/html5
I've researched this and tried all the solutions and yet the text is not vertically aligned.
jsfiddle: http://jsfiddle.net/9a6pdfbt/
html:
<a>משטרה</a>
css:
a {
font-size: 2rem;
border: 2px solid black;
padding: 10px;
display: flex;
align-items: center;
vertical-align: middle;
}
If you use ctrl+shift+c to examine the a tag, you can see that the text is aligned to the bottom of the a tag and not in the exact middle
If you're trying to align your text in the center, vertically, there are multiple ways you can do it.
One way is to use absolute positioning like so (won't work for Bootstrap Columns):
.parent-class {
position: relative;
}
.parent-class a {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
And in your HTML:
<div class="parent-class">
<a>משטרה</a>
</div>
If you're using Flexbox, all you need is this in your CSS:
a.flexbox {
display: flex;
align-items: center;
justify-content: center;
}
And in your HTML:
<a class="flexbox">משטרה</a>
Unless you specify a height, the text should always be vertically aligned.
a {
font-size: 2rem;
border: 2px solid black;
padding: 20px;
display: flex;
align-items: center;
vertical-align: middle;
background-color: red;
}
<a>משטרה</a>
If you do specify a height, the flexbox should do it all for you. What would break your code there would be the display: inline-block;. I fixed the Fiddle for you: http://jsfiddle.net/3L5d7awj/
I was wrote this source code just for example, I was manual enter padding-top 90px for h2 tag for example what i want; but when remove padding text is not centered vertical. This is not problem when i know bluebox div height but some times this is 200px, some times 900px.
.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}
.bluebox h2
{
font-family: Arial;
font-size: 10pt;
text-align: center;
padding-top: 90px;
}
<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>
Demo: http://jsfiddle.net/5UJWa/
.bluebox {
width: 400px;
background-color: blue;
height: 200px;
position: relative; /* allow absolute positioning within */
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
position: absolute; /* positioning */
top: 50%; /* 50% from the top (half way) */
margin-top: -5pt; /* bring it back up half the height of your text size */
width: 100%; /* to allow for the text align */
}
Example at http://jsfiddle.net/zTPgh/1/ - Change the height of the container and run or update to see it in action.
You can play with display: table-cell;.
Your new CSS:
.bluebox {
width: 400px;
background-color: blue;
height: 150px;
display: table-cell;
vertical-align: middle;
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
}
Check out the illustration on jsFiddle.
See my tutorial here which will vertically align and center text and images. DON'T rely on line-heights as you'll have huge gaps between lines of text. http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
It is very short and easy css and html, Please check below code and you can find output on screenshort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
For aligning an element vertically center, I have used css3 calc() function. It's perfectly working in all the latest browsers including ie11 and edge.
Check it live here https://jsfiddle.net/ashish_m/ebLxsxhk/
.calcTest { width: 250px; height: 250px; border:1px solid #e0e0e0; text-align: center; }
.calcTest .calcTestInner { width: 50px; height: 50px; background: #e0e0e0;
margin: 0 auto; margin-top: calc(50% - 25px); vertical-align: top; }
<div class="calcTest">
<div class="calcTestInner">
Hello Folks
</div>
</div>
I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box?
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
line-height: 100px;
vertical-align: text-bottom;
}
<div>FoxRox</div>
2020 Update
You can use CSS grid, flexbox or the original method with line-height:
body { display: flex } /* just to prettify */
div {
margin: .5em;
width: 6.25em; height: 6.25em;
background: #eee;
color: #333;
text-align: center
}
.grid {
display: grid;
align-content: end;
}
.flex {
display: flex;
align-items: flex-end;
justify-content: center
}
.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }
<div class='grid'>Hello</div>
<div class='flex'>Hello</div>
<div class='lh'>Hello</div>
Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem.
The solution is to change line-height to twice the height minus the size of the text and remove useless vertical-align.
Enclose the text in a p tag with display:inline-block. Set vertical-align to the p element.
<div>
<p>FoxRox</p>
</div>
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
}
p {
display: inline-block;
vertical-align: -80px;
}
Demo
You could set display to table-cell, try this CSS for example.
width: 100px;
height: 100px;
display: table-cell;
vertical-align: bottom;
Demo: http://jsfiddle.net/Kawwr/
You could check out my answer to https://stackoverflow.com/a/6116514/682480.
Here is the demo for the above answer.
The trick is to use display: table-cell on the outer container. That way you can use the vertical-align: bottom and display: inline-block; on the div.