I have one div with primitive styles
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 16px;
height: 16px;
box-sizing: border-box;
border: solid 1px #cfcfcf;
and :after pseudoelement on it
content: '';
display: flex;
width: 14px;
height: 14px;
background: #3fcaca;
border-radius: 50%;
But such divs look different in the different screen area. Browser zoom is 100%
I am using 15 inch full HD screen with windows up-scaling which obviously is the reason. Is there a way to fix such things by some CSS adjustments?
If you want to align things on top of an element with :after (or before:), set the parent element to position: relative; then set the :after to position: absolute;, then adjust top:, left:, to make things line up.
I found a very simple answer:
Just replace border with box-shadow. Sounds unusual, but box-shadow can generate absolutely same look as border and in same time looks always smooth. Even on pixel-scaled screens
Related
Giving that code:
.avatar {
font-size: 40px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 2em;
height: 2em;
border: .15em solid red;
border-radius: 50%;
overflow: hidden;
}
.avatar>img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="avatar">
<img src="https://thispersondoesnotexist.com/image" alt="avatar">
</div>
resulting avatar have pixels of parent element between border and own background.
They're better visible in smaller sizes (and zoom levels), but they also exist in higher zoom.
And here in firefox:
I think it's a bug, but I tested it on multiple browsers (chrome, chrome mobile, Samsung internet browser, Firefox) and in every there was some kind of this behavior.
I've tried setting background to border color, but this only image it's not the best solution, because image is still distorted.
Setting image as background helps in chrome, but only if there is no <img> selector, and I need it, to don't have accessibility issues.
You know how to repair this? Or where to find bug ticket for this?
Having a little trouble removing a very thin border that is appearing around our :before and :after elements. This only seems to appear on a mobile device - doesn't even pop up in Chrome's device tools.
Problem:
Here's how the HTML/CSS looks.
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 100px 0px;
margin-bottom: 56px;
width: 100%;
}
container:after {
content: "";
background-image: url("$asset");
background-size: cover;
background-position: bottom;
position: absolute;
left: 0;
top: -15px;
width: 100%;
height: 16px;
border: 0;
outline: 0;
}
<div class="container">
<div class="bg"></div>
<section>
//Headings and Links here
</section>
</div>
I've tried making absolutely sure borders and outlines are set to none - and also adding and taking away a pixel or two from the top and bottom margins, but nothing really seems to work. It's also a bit inconsistent, the lines don't necessarily show on every page that the component is on.
Replace border: 0; with: border: none; very simple CSS Code. Also, the outline code is just for things like text, this has nothing to do with the border.
It's a chrome bug lads. Second answer here nailed it.
The solutions is reducing the height/width to 0 and putting padding in to account for the space instead. Seems to have worked in my case.
I think I am missing something but I can't find a solution to the following problem.
I am using custom checkboxes on a list of sentences. At first it looks good but once you check the first checkbox, it moves.
I can't find out why the checkboxes move once you check them?
Here is a fiddle: https://jsfiddle.net/Hodor_/vhhj7huv/
I have noticed that by changing content: "/2714"; to content: "";
the checkbox doesn't move on click.
Can't understand how the content affects the position of the checkbox.
In other questions I saw recommendations to use vertical-align:middle, it doesn't work for me.
Any ideas?
The issue is with your usage of display: flex in conjuncture with position: absolute. It doesn't always work well.
To fix this you need to make 3 simple changes:
1) Remove position: absolute from your label:before
2) Remove padding: 0 0 0 50px; from your label
3) Add a margin-right: 20px(or any you want) to the label:before.
Simple.. So your final code looks like - Fiddle here
label{
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 30px;
cursor:pointer;
color black;
}
label:before{
/* position:absolute; */
content:"";
display:flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
left: 25px;
text-align:center;
font-size: 20px;
color: white;
border: 1px solid #9b9b9b;
border-radius: 4px;
transition: all 0.5s ease;
margin-right: 20px;
}
Remember: flexbox allows you to have a "flexible" or flow like control over your elements, it gives a more flexible nature to your elements positioning elements on its own based on your requirements.
position: absolute on the other hand does the exact opposite. It takes the element out of the document and lets you place it where you want via directions(left, right, top, bottom), its more like a "rigid" or stubborn way of controlling your elements.
I used text-indent to hide the content, so basically the content is always there and the checkbox now is not moving.
Here the working fiddle.
I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
See the jsfiddle below:
http://jsfiddle.net/bZsaw/3/
As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in IE7.
a,button {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
a {
display: table;
-moz-box-sizing: border-box;
}
a span, button span {
vertical-align: middle;
text-align: center;
}
a span {
display: table-cell;
}
Looking for a simple CSS only solution.
The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.
The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:
a {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
line-height: 150px;
display: block;
}
a span {
display:inline;
display:inline-table;
display:inline-block;
vertical-align:middle;
line-height: 20px;
*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too..
http://jsfiddle.net/bZsaw/13/
You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.
All answers are not updated,and all of them are basically hacks, you should use new CSS3 features, in this case flexbox
a,button {
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
display:flex;/*CSS3*/
align-items:center;/*Vertical align*/
justify-content:center;/*horizontal align*/
border: 1px solid #000;
}
<span>Testing 1,2,3</span>
<button><span>Testing 1,2,3</span></button>
That should work for your problem, note that align-items and justify-content will behave the opposite if set flex-direction:vertical, default is flex-direction:row.
Feel free to use, all browsers support it caniuse.com/#search=flex
Also check out the free and excellent course flexbox.io/ he is the best teacher at this
Also check out css-grid, also new in CSS3
If your text won't be larger than the width of the box you could set the line-height equal to the height of the box.
line-height:150px;
The cleanest and most consistent way I found is this
display: grid;
place-items: center;
https://jsfiddle.net/j8bktum9/
Use line-height:150px; and display-inline:block;
I have this CSS code:
#tweet-container{
width: 290px;
height: 272px;
border: 1px solid #CCC;
color: #CCC;
font-size: 28px;
text-align: center;
letter-spacing: -2px;
min-height: 10px;
display: table-cell;
vertical-align: middle;
padding: 15px;
}
But firefox doesn't seem to recognize the top and bottom padding. Safari and Chrome both show it normally, and even in Firebug when I add padding-top: it doesn't work. Its like its not a valid statement or something. Is there something I'm missing?
Humm, this is a bit interesting. You've set the width as 272px, but its actually displayed as 270px. You've set the height as 290px, with the 30px total of padding, the real displayed height should be 320px, but its actually 318px.
Had a little play and taking out display: table-cell; seems to sort the issue. Although the padding isn't spread equally for some reaosn, it all appears at the bottom. Putting the text in a p tag, and giving that a 15px top margin has done the job though I think.
did you try adding padding:15px!important; ?