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.
Related
I have an icon that I am vertically aligning in middle of a container using flexbox.... it looks like this
but when moving over to a small screen, when the text falls to two lines, the image is not vertically aligned where I want it to be:
I want it to be vertically aligned in the middle to the last line of text only, not vertically aligned in the middle of both lines of text. This is the result I want, with the info icon being inline with "here" and in the middle:
How can I go about achieving this?
.card-heading {
padding: 30px 20px 10px;
display:flex;
font-size:50px;
}
button {
background:none;
border:none;
align-items: center;
}
button img {
height:30px;
}
<h2 class="card-heading"><span>CONTENT IN HERE </span><button class="card-more-imfo" type="button"><img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png"></button></h2>
You need to change your element structure as below. You need to position your button relative to the latest parent span element which is <span>HERE</span> with help of position: absolute.
.card-heading {
/*padding: 30px 20px 10px; removing extra padding to accommodate both versions in single screen and one not need to scroll*/
display:flex;
font-size:50px;
}
span{
position: relative;
}
button {
position: absolute;
background:none;
border:none;
align-items: center;
right: 0;
top: 50%;
transform: translate(100%, -50%);
}
button img {
height:30px;
}
.demo-2{
max-width: 200px; /*experiment purpose */
}
<h2 class="card-heading">
<span>CONTENT IN
<span>HERE
<button class="card-more-imfo" type="button">
<img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
</button>
</span>
</span>
</h2>
<h2 class="card-heading demo-2">
<span>CONTENT IN
<span>HERE
<button class="card-more-imfo" type="button">
<img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
</button>
</span>
</span>
</h2>
I took the liberty to make some changes on your HTML tags, instead of using h2 as the parent element I decided to use a div instead and place h2 and img tags inside.
Example: https://i.stack.imgur.com/3Jl3r.png
<div class="card-heading">
<h2> CONTENT IN HERE </h2> <img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
</div>
I had to use media queries rules and change your positioning on the icon, changing it to absolute and then added padding-top.
.card-heading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 50px;
height: auto;
width: 100%;
border: 1px solid black;
}
button {
background: none;
border: none;
}
img {
height: 30px;
width: 30px;
position: absolute;
right: 21px;
padding-top: 55px;
}
#media screen and (min-width: 768px) {
.card-heading {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 50px;
height: auto;
border: 1px solid black;
}
button {
background: none;
border: none;
}
img {
height: 30px;
width: 30px;
position: relative;
padding: 0;
right: 0;
}
}
```
you can either both the class of the image and of the text float to left to have them aligned as you need... i.e. in .card-heading and whichever is the class of the info image. just write float:left;
so i have created this flexbox container with some flex-items:
so what i have is when i press on overview or alerts, it doesn't have this white border background color, when i press on one of them it will trigger a class called .selected and will color the background in white.
the problem is when i press on one of them the white border is not spamming the entire width ( from start to end) also the text inside the background is not centered in the middle when i press it and i don't know why
code:
<div className="container">
<div className="flex-item item-1 item">John Smith</div>
<div className="flex-item item-2 item">Male, 26 years old</div>
<div className='flex-item item-3 item'onClick={setSelectedItem} style={style} > Overview</div>
<div className='flex-item item-4 item'onClick={setSelectedItem} style={style}>Alerts</div>
</div>
</div>
css code:
.container {
border: 2px solid #57c0e8;
background-color: #57c0e8;
margin-top: 5%;
float: left;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color:white;
display: flex;
flex-direction: column;
height:40rem;
width:15rem;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
font-size:0.9rem;
}
.flex-item{
margin-top: 2rem;
}
.selected{
background-color: white;
color: #57c0e8;
border-radius: 50px 0 0 50px;
box-shadow: 2px 2px 5px lightgray;
width: 14rem;
height: 5%;
text-align: left;
}
If I understood correctly, you want the white part where it says "Overview" to have the text centerent vertically.
If this is the case, I would give your .selected element display:flex; align-items:center; . For the part with the width of it, seems like you have a cointainer that has a fixed width. As we dont have a codepen, I can't say for sure, but I think that width is the problem. Try removing it , and give all items but that "Overview" a padding left. Tell me what happens after you do it.
Would like me some codepen.
for .selected, remove border-radius and make width:100%
To center (vertically) text inside, just add align-items: center to .flex-item:
.flex-item {
display: flex;
align-items: center;
}
And to be full width, change to width: 100% on .selected
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.
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 tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?
Flex Solution
It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
In the above example, we first set the parent element to display: flex; and later, we use align-self to flex-end. This helps you push the item to the end of the flex parent.
Old Solution (Valid if you are not willing to use flex)
If you want to align the text to the bottom, you don't have to write so many properties for that, using display: table-cell; with vertical-align: bottom; is enough
div {
display: table-cell;
vertical-align: bottom;
border: 1px solid #f00;
height: 100px;
width: 100px;
}
<div>Hello</div>
(Or JSFiddle)
You now can do this with Flexbox justify-content: flex-end now:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>
Consult your Caniuse to see if Flexbox is right for you.