http://codepen.io/maxwbailey/pen/nxaFr
I'm trying to get the text to center vertically. This is only important when there is white space (I.E. when the auto height would be less than min-height). How can I accomplish this? I've seen this question asked several times, but none of the answers I've yet found apply to my application.
Thanks! ^_^
Given the fact that you've set a min-height of 75px, you can just add padding of half that to the top and bottom of the text, like so:
.warning {
display:block;
font-family: sans-serif;
font-weight: bold;
padding: 32.5px 0;
/*vertical-align: middle;*/
}
.warning needs to be display: block; to accept padding, but those are the only changes that are necessary to accomplish your objective, I think. Check it out: http://codepen.io/maxwbailey/pen/qcvre
EDIT
If you want to keep the text centered until the container gets small enough that it fills the min-height, you need to use display: table-cell, like so:
.warning {
display:table-cell;
font-family: sans-serif;
font-weight: bold;
vertical-align: middle;
height: 75px;
}
http://codepen.io/maxwbailey/pen/dwfar
Related
This question already has answers here:
How can I make padding apply to wrapped text with CSS?
(4 answers)
Closed 5 days ago.
I feel like I'm losing my mind...
span {
max-width: 150px;
display: inline-block;
background: yellow
}
<span>words words words words words words words words </span>
What I want: The yellow box to be no wider than the longest line of text.
What I get: Lots of empty space on the right hand side.
A few years ago I could have believed this was a limitation of CSS. But it's 2023, things are supposed to be good these days...
I've tried everything I can think of, floats, tables, flex, grid, obscure property values like fit-content etc.
I THINK I'm coming to the conclusion that this isn't possible without javascript?
Can someone confirm? Can someone explain WHY?
Or am I missing something simple?
Thank you!
I think you're looking for box-decoration-break: clone. Make sure that your element is set to display: inline and use a wrapping container to control the width.
.container {
max-width: 15rem;
}
span {
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
/* Just for 💄 purposes */
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 3rem;
color: hsl(0 0% 100% / 1);
line-height: 1.2;
text-transform: uppercase;
background: darkviolet;
padding: .5rem 1rem;
}
<div class="container">
<span>different words with different lengths to make it interesting</span>
</div>
I am stuck with this simple thing. Basically, i want to make something like this:
but my username view covers the whole width of the page and i get something like this:
My css style:
h3{
font-weight: bold;
color: #675eaf;
background-color: #f2f2f2;
padding: 8px;
font-size: 1.5vw;
}
Ok, so i set the max-width to about 20% and added margin:auto and it works.
How to remove spacing from top and bottom on Ion Icons?
I use it in my html like :
<div><i className="close ion-ios-close-empty" /></div>
and this is default style for all ionicons:
display:inline-block;
font-family:"Ionicons";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
font-size: inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
And close class is as follows :
.close{
color: #ffffff;
font-size: 50px;
}
I didn't add any style to it, I only increased font-size, but the icon is shown like on the photo.
Is there any way to remove the spacing on top and bottom?
It's a little bit later, but my solution is to set the line-height to 0.6 em:
.close{
color: #ffffff;
font-size: 50px;
line-height: 0.6em;
}
It's more like a work around, but if you play a liite bit with the line-height property, you can get good results.
Hint: If you want to choose shadow, use text-shadow and not box-shadow.
Use line height property if you want 20px height.
Example:
[selector] {
line-height: 20px;
}
I'm using the latest font-awesome library (4.4) and it seems some icons are not vertically centered or they have different sizes.
Reproduction online
I made a zoom over a font-size: 14px; list here:
Is there anything I'm doing wrong?
.quick-actions i {
font-size: 54px;
cursor: pointer;
color: #999;
vertical-align: middle;
}
.fa:before {
vertical-align: middle;
}
.quick-actions{
border:1px solid #ccc;
display: inline-block;
}
This seems to work...
http://jsfiddle.net/nh1sgw1a/
Edit (I see it really is a problem with fa-commenting-o):
.quick-actions i.fa-commenting-o:before{
font-size:50px;
/*margin-top:-5px;*/
float:left;
}
http://jsfiddle.net/nh1sgw1a/2/
Like said in the comments, they aren't drawn centered in the middle of the horizontal axis of its shape, and that's why they look like being in different heights.
That said, I found this CSS rule useful to place them closer to the middle edge of my buttons/bars (more vertically centered, although not perfect):
i.fa {
vertical-align: middle;
}
I am trying to create tabs that resize a bit similar to how Chrome tabs does. But I am not sure how and if it is even possible to do without JavaScript.
I don't care about browser support, I only want to see if it can be done with pure html and css/css3.
Here is the spec:
The tabs are never wider than the text inside them
When the right most tab reaches the right side of the window on resize, the tabs should start shrinking (ideal is that this happens to the widest tab first)
the active tab should never shrink
As the tabs shrink, the text should be hidden by ellipsis
the tabs will stop at a min-width that I set (so they can't go to zero width).
Can this be made with something like display: box; and box-flex: 1; properties perhaps? I haven't managed to make it yet. I have already made it with JavaScript. But the performance is not as good as I want it to (this is a BIG wep app).
So, any CSS-Gods out there up for it? If there is a way to do it with very limited use of JavaScript, I am also interested.
Thanks all!
You can get pretty close to Chrome's actual behavior with the flexbox...
body {
font: 12px/130% 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
ul {
background-color: #eee;
display: -webkit-box;
padding: 10px 10px 0 10px;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 150px;
min-width: 50px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
http://jsfiddle.net/a656n/
​However, your specs are impossible in CSS only. I'd also suggest that keeping the active tab 'unshrunk' breaks conventions because your tabs will change position every time you click on them.
I improved on Duopixels anwer by using one extra <span> element and display: table-cell instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. http://jsfiddle.net/w34nm/ (Tested in IE8+, Firefox 10, Chrome 17)
PS: you should probably use JavaScript to set the right width values on the list items
Well, first of all, your desired functionality is not how tabs in Chrome work, they simply remain a fixed size until there is not enough room, and then they shrink uniformly to fit. (According to MDN, You could accomplish this:
To make XUL elements in a containing box the same size, set the
containing box's equalsize attribute to the value always. This
attribute does not have a corresponding CSS property.
)
Also, a visual representation of what you are looking for would be very helpful, I found some of the demands rather confusing.
Nonetheless, I've scrapped together this. Let me know if it is at all close.
ul{
display: -webkit-box;
width:500px;
background:lightgray; text-align:left;}
li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }