Here is my JSFiddle with an SVG positioned to the left of some text inside a button. I am looking for a way to align the SVG vertically with the text within the button.
I've considered a couple of methods:
line-height, but that doesn't seem to be working.margin-top, but it ends up moving all the content within the button down.Any suggestions on how I can successfully align the SVG with the text? Thank you in advance!
If you find that the vertical-align property is not giving you the precise positioning you desire, consider adjusting the icon's placement using position: relative;.
.icon {
...
position: relative;
top: 0.15em;
}
Using em units for the positioning will ensure that the style works seamlessly with any font size.
button {
font-family:'Texta-Regular', sans-serif;
font-size: 2.7em;
line-height: 1.2em;
display: block;
margin: 2em auto;
padding: .3em 2em;
text-align: center;
border: none;
border-radius: 5px;
-webkitborder-radius: 5px;
outline: none;
background-color: #dd4b39;
color: #fff;
}
.icon {
width: 1em;
display: inline;
margin-right: 40px;
position: relative;
top: 0.15em;
}<button>
<svg version="1.1" fill="#fff" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96.828 96.827" xml:space="preserve">
<path d="M62.617,0H39.525c-10.29,0-17.413,2.256-23.824,7.552c-5.042,4.35-8.051,10.672-8.051,16.912c0,9.614,7.33,19.831,20.913,19.831c1.306,0,2.752-0.134,4.028-0.253l-0.188,0.457c-0.546,1.308-1.063,2.542-1.063,4.468c0,3.75,1.809,6.063,3.558,8.298l0.22,0.283l-0.391,0.027c-5.609,0.384-16.049,1.1-23.675,5.787c-9.007,5.355-9.707,13.145-9.707,15.404c0,8.988,8.376,18.06,27.09,18.06c21.76,0,33.146-12.005,33.146-23.863c0.002-8.771-5.141-13.101-10.6-17.698l-4.605-3.582c-1.423-1.179-3.195-2.646-3.195-5.364c0-2.672,1.772-4.436,3.336-5.992l0.163-0.165c4.973-3.917,10.609-8.358,10.609-17.964c0-9.658-6.035-14.649-8.937-17.048h7.663c0.094,0,0.188-0.026,0.266-0.077l6.601-4.15c0.188-0.119,0.276-0.348,0.214-0.562C63.037,0.147,62.839,0,62.617,0z M34.614,91.535c-13.264,0-22.176-6.195-22.176-15.416c0-6.021,3.645-10.396,10.824-12.997c-...
<path d="M94.982,45.223H82.814V33.098c0-0.276-0.225-0.5-0.5-0.5H77.08c-0.276,0-0.5,0.224-0.5,0.5v12.125H64.473c-0.276,0-0.5,0.224-0.5,0.5v5.304c0,0.275,0.224,0.5,0.5,0.5H76.58V63.73c0,0.275,0.224,0.5,0.5,0.5h5.234c0.275,0,0.5-0.225,0.5-0.5V51.525h12.168c0.276,0,0.5-0.223,0.5-0.5v-5.302C95.482,45.446,95.259,45.223,94.982,45.223z" />
</svg>Sign In with Google</button>Greetings! To achieve your desired outcome, simply include the code snippet below within the specified class:
.icon {
width: 1em;
display: inline;
margin-right: 40px;
vertical-align: bottom;
}
align-items: end; should work.
div {
font-family: 'Roboto', sans-serif;
font-size: 3.2em;
line-height: 1.5em;
display: flex;
margin: 1em auto;
padding: .5em 3em;
text-align: center;
border: none;
border-radius: 7px;
-webkit-border-radius: 7px;
outline: none;
background-color: #3498db;
}
.icon {
width: 2em;
vertical-align: bottom;
margin-left: 30px;
}<div>
<i class="material-icons icon">face</i>
Login with Facebook
</div>In my opinion, a more effective approach in 2020 to avoid this issue would be to not readjust with negative values. Instead, you can place it in the SVG element using <text> and <tspan> (which can still be styled using CSS):
CSS:
button svg text {
font-family: 'Texta-Regular', sans-serif;
font-size: 20pt;
}
HTML:
<button>
<svg viewBox="0 0 200 50">
<rect rx="5" height="100%" width="100%"/>
<!-- path d="bla, etc"/ -->
<!-- path d="bla, etc"/ -->
<text dx="0" dy="0" x="50%" y="50%" text-anchor="middle"><tspan dominant-baseline="middle">Sign In with Google</tspan></text>
</svg>
</button>
Note that Safari requires the y centering on the <tspan> tag.
The desired border-radius is achieved with the use of rx on the <rect> element
This code snippet uses SVG 2.0, but I believe it should work similarly in version 1.0 as well.
<button>
<svg viewBox="..." height="..." width="..." ...>
<path ...>...</path>
</svg>
Your unique text here
</button>
To achieve the desired result, apply the following styles to the button element:
display: flex;
text-align: center;
Learn more about using flexbox in CSS:
I've been searching online but can't find a definite answer - is it possible to load different HTML based on the type of browser being used? In my specific case, this seems to be the only solution. After trying everything else, it looks like the ...
I am facing issues with the online validator flagging errors for my php tags. To validate my HTML, I currently have to manually remove all the php inserts which is quite time-consuming. Is there a more efficient way to handle this problem? Below is an e ...
My website utilizes JQuery to toggle classes with display properties for three divs positioned relatively. The side navigation contains three links that, when clicked, display different divs on the page with a fade in/fade out effect. $(document).ready(fu ...
My ultimate goal is to keep my web form code as minimal as possible for easier maintenance. I am currently working on creating a questionnaire and have been using two td elements for this purpose. Here is an example of what the current text structure looks ...
Recently, I encountered an issue while working on a website form where the input tag was showing borders during autocompletion, despite specifying border:none. I tried various CSS pseudo classes to resolve this problem but none of them worked. Does anyon ...
I need help with my website - I have a table that is quite tall and spans across multiple pages when printing. Is there a way to make the header row appear on top of each page when printing? ...
My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple s ...
I am in search of a solution to extract all the bold snippets within the content of an HTML document. The task needs to be performed on the server side using Java, rather than on the client-side browser. The text appearing as bold on the page may be due t ...
Is there a way to append a value to an input field using JQuery, instead of appending it to a select option? Select option: <select name="c_email" class="form-control" ></select> JQuery value append: $('select[name=&q ...
Adding the code snippet below into my Shopify product-liquid file caused chaos on the page, altering the font and even changing the shape of the add to cart button... The problematic code is shown below: <div id="shopify-section-product-icon-gallery" ...
After loading my webpage, I click on a link and the expected javascript runs as planned. However, once it completes and presents the results, the page goes blank to a white screen displaying only the outcomes. My goal is to have these results showcased o ...
After spending a considerable amount of time on this task, I find myself at a crossroads. In the second part of my code (as indicated), there is an anchor tag (< a >) with a class name. My goal is to implement a smooth scroll to an element based on t ...
Looking to create a dynamic header with different sections such as headerright, headercenter, and headerleft, each with unique content. I've successfully added an image to the header, but when I resize the page or view it on a mobile browser, the ima ...
My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...
I am trying to eliminate the hover effect from the content inserted using the css selector :after. Below is my code where I want to remove the underline hover effect from > HTML <ul class="path_string_ul"> <li>Home</li> <l ...
procedure Add the objects from the dropdown into the dropdown menu. The Json file is located in root/ajax/.json and the working file is stored in root/.html. Problem: None of the objects from the JSON file are appearing in the dropdown menu. I attempted ...
I created a table to keep track of the products in each user's shopping cart. Within each row of the table, there is a button that allows the user to remove a single product from their cart. Below is the HTML code snippet for this functionality. < ...
I am facing an issue with a button in my parent component that handles form validation. This button triggers the display of a child component, which then makes an API call. The problem arises when I modify the input as the display changes simultaneously. M ...
I am attempting to create a design that expands to fill the screen, but allows for scrolling when the content exceeds the available space. My current approach using basic flexbox, as suggested in this answer, successfully fills the screen. However, overfl ...
After successfully uploading an image from my drive, I am encountering an issue where I am unable to locate the folder path of that image For example: C:\Images\Logo\Image.png $('#pngfile').change(function (e) { var tmppath = URL ...