i want to center align an image of 18px height with text next to it. Here is the code i use:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?
Thanks
Don't forget to reset styles
(margin/padding) : div, img, span {
margin:0; padding:0; border:0 }
For vertical-align to work, your
elements must me inline.
A classic choice to align text
vertically is to give a line-height
equal to container.
For example :
<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
Maybe you have a border somewhere in there you need to get rid of or set to zero width?
i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>
this will shift the image up by 2px from where it originally was.
Related
When I use this code on forums the top image(background) always shifts left instead of staying centered. The bottom image(floating text) works as is.
<div style="background-image: url('https://i.ibb.co/TmkSL8m/bg7.jpg'); color: #000000; background-color: #000000; background-attachment: fixed; text-align: center;"><img src="https://i.ibb.co/L6zQY0S/name96.png" /></div>
tried setting the width to auto but it locks the background image in place and doesn't allow the text to float over it.
enter image description here
enter image description here
header{
position:fixed;
top:0;
left:0;
background-color: $color;
width: $width;
height: 56px;
}
.utility{
#include lockPosition(10px);
right:10px;
width:700px;
height:20px;
padding-top:10px;
z-index:1000;
position:absolute;
}
I find that only absolute position fixes the z-index issue I am having but I want the header to be fixed so it does scroll. Is there a way to have a absolute position in a fixed element and not effect the z-index?
I think the easiest way is to push down the box with absolute position, i guess on .utility,
.utility{top: npx}
As for your question, the importances of the z-index is depending on how you lays the HTML DOM, so for example if your
<header>Your fixed position</header>
<main>
<nav>Your absolute position</nav>
</main>
with your fixed position z-index will be much more important than your
Hope that helps,
My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.
How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.
Here's how I am creating my layout:
<div style="height:100%;display:flex;flex-direction:column;">
<div style="height:250px;flex-grow:0;">
<h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
<ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
<div style="flex-grow:1;">
<h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
<p>How can I get the grid to be aware of my div's actual height?</p>
<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
</div>
I want the grid in the second flex item to have an appropriate height. How can I do this?
In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:
.item-1 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Plunker Screenshot running in Chrome
I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?
try setting auto height on grid ready event
this.gridApi.setDomLayout('autoHeight');
details: https://www.ag-grid.com/javascript-grid-width-and-height/
I'm setting up a webpage in Github using Jekyll. I've implemented Mathjax in order to render mathematical text. My configuration is minimal:
<!-- Mathjax -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
It works fine, except for the fact that inline math text and uppercase letters look to big, considering the surrounding text. I set up this page as an example.
So far the only thing I've been able to do is to scale down the math by a factor of the surrounding text, by using
"HTML-CSS": {
scale: 90
}
The problem is that it scales all math expressions, including lowercase letters that seem to have the right size without scaling.
So my question is if there is a way to fix this discrepancy.
is ... there is a way to fix this discrepancy?
No. MathJax matches the surrounding font by scaling its own fonts so that the ex-height matches that of the surround font. That means that lower-case letters should be approximately equal in height, as is shown in your example. So MathJax is correctly determining the ex-height of the surrounding and matching that.
The reason the capitals don't match is that different fonts have different ratios between the heights of the upper- and lower-case letters. So if you get the lowercase letters to match, the uppercase ones will not (and vice versa). With fonts that have a different uppercase-to-lowercase height ratio than the MathJax fonts, you won't be able to get both to match the surrounding font. That is inherent in the design of the two fonts.
The only other possibility would be to scale the uppercase letters differently from the lowercase ones, but that would mean the weights would not match, and the quality of the math layout would suffer.
So, no, you can't get both, in general.
Edit 30 April 2020:
In the comment below we discuss the meaning of the em unit, which is the same as the (computed) font-size for the font. Unfortunately, that is not the same as the height of the capital letters in the font. For example, the code below shows an M inside a red box of height and width 1em and an x inside a box of height and width 1ex for the fonts Times, Courier, Impact, and Zapfino. Run it to see the results.
div {
font-size: 60px;
display: inline-block;
min-width: 120px;
}
em-box {
display: inline-block;
background-color: red;
width: 1em; height: 1em;
margin-right: -1em;
}
ex-box {
display: inline-block;
background-color: red;
width: 1ex; height: 1ex;
margin-right: -1ex;
margin-left: 10px;
}
M-box {
display: inline-block;
min-width: 1em;
}
x-box {
display: inline-block;
min-width: 1ex;
}
<div style="font-family: Times">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Courier">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Impact">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Zapfino">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
Here is an image in case you can't view the results above.
Note that the em boxes (red) are the same in all cases, and are the height specified in the CSS (50px), whereas the height of the M varies within that box (whereas the height of the x matches its box). So the em-size can't be used to tell the height of the capital letters in the font.
I don't know of a way to determine the actual height of the M.
I'm new to stackoverflow.com and this is my first post so:
I want to have a h1-text with underline. This underline will be an image and it should have a fixed width of 420px. The text in h1 will often be wider than the 420px, but sometimes shorter. Now I know that these are the solutions to get the underline as an image, but how do I set the fixed width for the underline only?
h1 {
background-image:url('images/hrBg.jpg');
background-position: 0px bottom;
background-repeat: repeat-x;
}
Create the background image with the width of 420px.
Then use the following css
h1 {
background:url('https://images.squarespace-cdn.com/content/v1/5834a5fd9de4bb511a531745/1572560269010-YEGGAHEJ1O3AG5OAMO7M/ke17ZwdGBToddI8pDm48kEnLsHrnzeww6Ind1smsg7N7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UZMvWVOiG2zXPfa_FplZumXplNQ97KbZI2EjeHIoBACLnr1xKjsq_-rO8kOgOtwYvw/Burning-Up-BG.jpg?format=2500w') no-repeat left bottom;
min-width:420px;
}
<h1>Text here</h1>
This will ensure that the background is shown only once to with of 420px. I have added the min-width property in case the content of h1 is smaller than 420px. The no-repeat property ensures that the background is shown only once as we have set the length via the actual image.