I have the following case:
but I would like that everytime and beta are displayed at the same vertical position as this:
I have the following html:
<h1 style="display: block;margin: 0 auto;position: relative;">
<svg enable-background="new 0 0 298.9 55.8" viewBox="0 0 298.9 55.8" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">.st0{fill:#231F20;}</style>
<path class="st0" d="..."></path>
</svg>
<p style="position: absolute;left: 85%;font-size: 50%;color: white;line-height: 0px;">beta</p>
</h1>
How can I solve this issue? Keep in mind that everytime should be centered, and beta should be to the right of it.
position: fixed
position: fixed;left: 85%
<html>
<head>
<style>
.vasile
{
display: inline-block;
line-height: 1px;
vertical-align: middle;
}
</style></head>
<body>
<div>
<h1 class="vasile"> asdasda</h1>
<p class="vasile">asdasda</p>
</div>
</body>
</html>
<p style="position:absolute; left:85%; font-size: 50%;color:#333; line-height: 0px; vertical-align: middle; display:inline-block; ">beta</p>
Related
I have a svg icon and a span element side by side. When the text overflows inside the span element, the svg also comes down along with it. I don't want it to happen.
Here is a of what I'm doing.
As you can see, the arrow icon is proper in Section 1 but in Section 2, it comes down with the text.
Here is the HTML code -
.rightContent {
border: 2px solid green;
height: 100vh;
overflow-y: scroll;
}
.sectionHeading {
background: #f7f9fa;
text-align: left;
font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02rem;
font-size: 1rem;
padding-top: .75rem;
padding-bottom: 1.05rem;
}
.sectionHeading p {
padding: 0;
margin: 0;
}
.sectionHeading svg {
float: right;
}
.sectionHeading small {
font-size: 0.75rem;
font-weight: 500;
}
<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
<!-- Section 1: Introduction -->
<div class="row">
<div class="card">
<div class="sectionHeading">
<span>Section 1: Introduction</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<p></p>
<small>14 / 14 | 1hr 5min</small>
</div>
</div>
</div>
<!-- Section 2: Experience -->
<div class="row">
<div class="card">
<div class="sectionHeading">
<span>Section 2: Experiences In The Corporate World</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<p></p>
<small>19 / 19 | 2hr 15min</small>
</div>
</div>
</div>
Most of the questions already present deal with aligning icons with text, but as I mentioned earlier, I want to align icons with span element and keep it fixed there, instead of aligning it with text.
Please feel free to share your inputs. I'll be grateful to learn from others since I'm still learning CSS. Thank you.
Please set max-width or width of span tag. As width svg tag is 16px, you can set that max-width of is calc(100% - 16px).
Try it
<style>
.sectionHeading span{
display: inline-block;
max-width: calc(100% - 16px);
}
</style>
In your case the best choice is using positions,using your .sectionHeading or.card as the relative element.
Try it:
.sectionHeading { /* you can also use your div .card */
position: relative;
}
svg { /* here you can also use a class name */
position: absolute;
top: 0;
right: 0;
}
Be in mind that maybe you will need to add a padding to your relative element, otherwise your svg will be leaning the border.
You had a few small problems like an empty p tag which I fixed.
I wrapped small & span tags in a container and Since you're using bootstrap, I added d-flex justify-content-between classes to sectionHeading. This fixed the problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.rightContent {
border: 2px solid green;
height: 100vh;
overflow-y: scroll;
}
.sectionHeading {
background: #f7f9fa;
text-align: left;
font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02rem;
font-size: 1rem;
padding-top: .75rem;
padding-bottom: 1.05rem;
}
.sectionHeading p {
padding: 0;
margin: 0;
}
.sectionHeading svg {
float: right;
}
.sectionHeading small {
font-size: 0.75rem;
font-weight: 500;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
<!-- Section 1: Introduction -->
<div class="row">
<div class="card">
<div class="sectionHeading d-flex justify-content-between">
<div>
<span>Section 1: Introduction</span><br/>
<small>14 / 14 | 1hr 5min</small>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
</div>
</div>
</div>
<!-- Section 2: Experience -->
<div class="row">
<div class="card">
<div class="sectionHeading d-flex justify-content-between">
<div>
<span>Section 2: Experiences In The Corporate World</span><br/>
<small>19 / 19 | 2hr 15min</small>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
</div>
</div>
</div>
today wanted to set the size of a background on a svg using the background-size property, but it didn't worked because the background wasn't an image, but it was a normal color (#ecf2f8)
here is what i want to do:
here is what i did:
here is my code:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
}
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
Have a nice day!
Try using padding to increase the size of the background around your element:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: 10px;
}
The px value you pick depends on what you want, just play around with different values and see if it gets your desired output.
Example code snippet with padding in CSS:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: 10px;
}
<html>
<head>
<title>while</title>
</head>
<body>
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
</body>
</html>
Html-css-js snippet of code: Code
You could use padding to resize the background of your icon. You can also resize the SVG icon by using transform: scale(1);
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: .5em; /* You could also use px */
transform: scale(1.5); /*Resize/scale the SVG*/
}
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
I added padding and transform:scale() in the CSS, please do check the snippet if it is your desired output
You need to create a div and add the background to the div, because i don't know why, with the padding property the svg disappears, here is the code:
<div id="svg1">
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
</div>
#svg1 {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 50px;
padding: 10px;
height: 30px;
width: 30px;
}
#arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* this will center the svg in the div horizontally and vertically */
I'm trying to create a type of 'blurb' with SVG icon with Title & Text using Flex. I have attached a visual example to show you what I'm trying to achieve.
I feel close, but what I've got so far is still kinda sketchy, and I'm struggling to get the exact output. Any advice to point me in the right direction would be appercaited. Thanks
EDIT: How do you reduce the space between H3 & P tags? (I did try margin & padding, yet it didn't have any effect)
Link to CodePen
HTML
<div class="blurb-container">
<div class="blurb-icon">
<svg width="99px" height="89px" viewBox="0 0 99 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Homepage---Desktop---First-Time-Visitor" transform="translate(-780.000000, -859.000000)">
<g id="Group-6" transform="translate(180.000000, 828.000000)">
<g id="home-icon-1-copy" transform="translate(600.000000, 31.000000)">
<path d="M22.150176,37.2957114 L58.414244,16.7220133 C60.8963066,15.3138644 63.9757833,15.5045087 66.2652073,17.2080509 L95.4458727,38.9211515 C97.7262512,40.617963 98.7949315,43.4975614 98.1736475,46.2712415 L89.8690907,83.346375 C89.1324698,86.6349692 86.2132711,88.9726247 82.8431877,88.9726247 L30.3226487,88.9726247 C26.6804011,88.9726247 23.6118056,86.2526419 23.1746879,82.6367194 L18.5550504,44.4221834 C18.2065153,41.539034 19.6242293,38.7287571 22.150176,37.2957114 Z" id="Path" fill="#ADC4DA"></path>
<path d="M68.593607,3.0866438 L94.8814573,28.4607721 C95.8351433,29.3813096 95.8620155,30.900668 94.941478,31.8543541 C94.489197,32.3229217 93.8659168,32.5875735 93.2146766,32.5875735 L88.608603,32.5874054 L88.6088522,55.3077597 C88.6088522,57.9587266 86.4598189,60.1077599 83.808852,60.1077599 L64.7380969,60.1074054 L64.7382432,44.0318665 L71.7133122,44.0322664 C72.3680935,44.0322664 72.9944465,43.7647377 73.4471807,43.2916941 C74.3636574,42.334105 74.3303291,40.8148745 73.37274,39.8983979 L73.37274,39.8983979 L50.1500969,17.6714054 L65.2600458,3.0866438 C66.1899666,2.18904546 67.6636861,2.18904546 68.593607,3.0866438 Z" id="Combined-Shape" stroke="#000000" stroke-width="4.80000019"></path>
<path d="M39.9033277,7.86593791 L73.37274,39.8983979 C74.3303291,40.8148745 74.3636574,42.334105 73.4471807,43.2916941 C72.9944465,43.7647377 72.3680935,44.0322664 71.7133122,44.0322664 L64.7382432,44.0318665 L64.7389267,74.5510029 C64.7389267,77.2019698 62.5898934,79.3510031 59.9389265,79.3510031 L16.5488733,79.3510031 C13.8979064,79.3510031 11.7488731,77.2019698 11.7488731,74.5510029 L11.7482432,44.0318665 L4.77448753,44.0322664 C3.44900408,44.0322664 2.37448744,42.9577498 2.37448744,41.6322664 C2.37448744,40.9774851 2.64201622,40.3511321 3.11505975,39.8983979 L36.5844721,7.86593791 C37.5124905,6.97776243 38.9753093,6.97776243 39.9033277,7.86593791 Z" id="Combined-Shape-Copy-10" stroke="#000000" stroke-width="4.80000019"></path>
<path d="M31.0829269,50.4861382 L45.404878,50.4861382 C46.7303614,50.4861382 47.804878,51.5606549 47.804878,52.8861383 L47.804878,79.3510031 L47.804878,79.3510031 L28.6829268,79.3510031 L28.6829268,52.8861383 C28.6829268,51.5606549 29.7574435,50.4861382 31.0829269,50.4861382 Z" id="Rectangle" stroke="#000000" stroke-width="4.80000019"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="blurb-content">
<h3 class="blurb-title font-graphikmedium">Search properties</h3>
<div class="blurb-label">Browse thousands of exclusive properties across the country.</div>
</div>
CSS
.blurb-container {
display: flex;
margin-top: 0px;
width: 470px;
height: 98px;
}
.blurb-container * {
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blurb-icon {
float: left;
display: block;
width: 99px;
height: 89px;
}
.blurb-content {
margin-left: 10px;
}
.blurb-title {
font-weight: bold;
font-size: 20px;
}
.blurb-label {
margin-top: 0px;
font-size: 18px;
}
.font-graphikmedium {
font-family: "graphikmedium";
}
You don't need to use floats. You can use flexbox for this entire thing. You also should be using a paragraph element underneath your h3 instead of a div.
The HTML and CSS is below, and I've also linked the codepen so you can play around with it and see the code in action.
https://codepen.io/bdlowery/pen/gOxqqKa
<div class="container">
<picture>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</picture>
<div class="text-content">
<h3>Search properties</h3>
<p>Browse thousands of exclusive properties across the country.</p>
</div>
</div>
/* main idea to get what you want */
picture {
max-width: 100px;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
}
/* setup to get responsive svgs */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
picture {
display: block;
}
svg {
display: block;
width: 100%;
height: 100%;
}
Add align-items: center; to the equation and replace the div under your h3 to a p tag instead. Here's the sandbox and I put a red border around it just so I could visually see what was going on. The code is the same as yours, I just added the align-items and replaced the div with a p. https://codesandbox.io/s/small-shadow-fde90?file=/index.html
Add this css
.text-content {
display:flex;
flex-direction:column;
width: 335px;
padding-left: 20px;
}
h3 {
font-family: 'Montserrat', sans-serif; font-size: 28px;
margin-bottom:-20px;
}
p {
color: #48525B;
font-family: "Helvetica Neue",Helvtica,Arial,sans-serif;
font-size: 20px;
line-height: 28px;
letter-spacing: 0;
}
I use a RestAPI, it's giving me different size SVG. Some images are fit but some images don't fit.
Example: If you look at the border and image, you gonna understand.
The main problem is that; I don't know all pictures sizes, How can ı set this case? (İf it's given 100% height change the card height and ı don't want this.)
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/afg.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/blr.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
.card {
border: 2px solid black;
text-align: center;
margin-bottom: rem(50px);
width: 320px;
overflow: hidden;
animation: showCard 0.7s ease-out forwards;
img {
vertical-align: middle;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&__body,
&__footer {
background: $skyblue;
}
&__body {
&-name {
color: $text-navy;
padding: rem(10px) 0;
font-size: rem(20px);
font-weight: $font-bold;
font-weight: normal;
border-bottom: 4px solid $text-navy;
}
&-infos {
padding: rem(15px) 0;
display: flex;
justify-content: center;
color: $text-navy;
span {
white-space: nowrap;
font-size: rem(14.3px);
}
span:not(:last-child) {
padding-right: rem(5px);
border-right: 3px solid $text-navy;
}
span:not(:first-child) {
padding-left: rem(5px);
}
}
}
&__footer {
border-top: 3px solid $text-navy;
padding: rem(15px) 0;
background: $text-navy;
cursor: pointer;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
There is no standard for flag dimensions. RestCountries provides flags in their true dimensions.
I created a 29 kB Single File Web Component that does all SVG flags in fixed dimensions (like most SVG flag Repos do).
And can use RestCountries (or any other SVG flag Repo) as alternative source:
https://flagmeister.github.io/
Alas, I did not create all crests, you picked the exact two I failed to complete: Afghanistan and Andorra for your screenshots. Those flags FlagMeister will default to RestCountries unless prevented with the detail setting.
<script src="https://flagmeister.github.io/elements.flagmeister.min.js"></script>
<style>
div {
display:grid;
grid-template-columns:repeat(6,100px);
gap:10px;
}
[nodetail] {
--flagmeisterdetail:99999;
}
</style>
<h3>RestCountries & FlagMeister (forced to no-detail)</h3>
<div>
<flag-af></flag-af>
<flag-af nodetail></flag-af>
<flag-by></flag-by>
<flag-by nodetail></flag-by>
<flag-ad></flag-ad>
<flag-ad nodetail></flag-ad>
</div>
If you can live with making local copies of all the flags. Then, if you add the following attribute to all SVGs, they will stretch to fit your <img> width and height.
preserveAspectRatio="none"
For instance, the Belarus flag becomes:
svg {
width: 300px;
height: 300px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="450" viewBox="0 0 1098 549" preserveAspectRatio="none">
<title>Flag of Belarus</title>
<rect fill="#C8313E" width="1098" height="549"/>
<rect y="366" fill="#4AA657" width="1098" height="183"/>
<rect fill="#FFF" width="122" height="549"/>
<g id="h">
<g id="q" fill="#C8313E" fill-rule="evenodd" transform="scale(5.304347826,9)">
<path d="M4,0h3v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1zM5,2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM5,4h1v1h-1zM0,1h1v1h-1zM0,7h1v1h-1zM11,0h0.6v2h-.6zM11,7h.6v2h-.6zM2,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM2,11h1v1h-1zM8,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM8,11h1v1h-1zM0,15h1v1h-1zM11,14h.6v2h-.6z"/>
<path d="M0,18h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1h.6v4h-.6v1h-1v1h-1v1h-1v1h-1v1h-1v2.6h-2v-0.6h-1v-1h-1v-1h-1v-1h-1 v-3h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-3v1h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1zM0,22h1v1h-1zM11,25h.6v1h-.6zM9,27h1v1h1v1h.6v1.6h-.6v-.6h-1v-1h-1zM7,30h1v.6h-1z"/>
</g>
<use xlink:href="#q" transform="translate(122,0) scale(-1,1)"/>
</g>
<use xlink:href="#h" transform="translate(0,549) scale(1,-1)"/>
</svg>
For some reason, no matter which vertical-align I use, the image is slightly under center from the text line. How do I match the size of the text? How do I match size of the emojis? How do I vertically center the image?
body {
color: #fff;
background: #000;
}
svg {
height: 1em;
width: 1em;
vertical-align: middle;
}
<section>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned with the text, and its size isn't the same as the other square emojis.
</p>
<p>
ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
</section>
Just add paddding bottom, Ive tweaked the fiddle.
svg {
height: 1em;
width: 1em;
vertical-align: middle;
padding-bottom:0.2em
}
https://jsfiddle.net/6hd320f4/
One solution would be to use flexbox like this:
p {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Don't forget flex: wrap in order to maintain the text line break.
Note: if you edit line-height and test different values, you will find a pixel inconsistency that is hard to avoid due to the fixed proportions.
Perhaps counter-intuitive, but if you use vertical-align: top;
margin: 1px 0; on the svg, it aligns correctly.
Try text-top as value of vertical-align
body {
color: #fff;
background: #000;
}
svg {
height: 1em;
width: 1em;
vertical-align: text-top;
}
<section>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned with the text, and its size isn't the same as the other square emojis.
</p>
<p>
ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
</section>