So I making this README.md file for a project of mine, but I have small problem. I created a logo for this project of mine and I want to place it centerd on a line with some text in this markdown file. Problem is it's off center. Here is the relevant markdown and html code
# EfficientCampus <img src="https://i.ibb.co/VTWfxFj/Efficient-Campus-Logo-Green.png" width="90" height="90">
I already tried absolut positioning, which works just fine on Intellij Community IDEA's markdown interpreter, but for some odd reason it doesn't work on Github's markdown interpreter. If any body could find away for my logo to be centerd with the "EfficientCampus" text and appear centered in Githubs markdown interpreter as well, that would be greatly appreciated. Thanks.
Related
Currently working on translating a website for a partner.
The website is made in Webflow, although parts of it is coded with some html/javascript. I have succesfully translated the labels here, but I cannot seem to access the text in and after the file upload buttons.
Help appreciated.
I tried Googling it, but to no avail.
HTML button uses system language.
If you want full control of button and text you should make your implementation with text that you want.
https://dev.to/faddalibrahim/how-to-create-a-custom-file-upload-button-using-html-css-and-javascript-1c03
everyone! I hope you are all fine.
Background
I'm a beginner in web development and I'm studying pure HTML, CSS and JS for front-end. In parallel, I've been studying Git to version my study/case study projects. I decided to create a README for my GitHub profile, because I saw some really cool customizations and I'm wanting to give "my personality" to my profile, in order to create contact and network with people from web development and data analysis (two areas I've been studying). Also, I saw a good opportunity to practice HTML incorporated into Markdown.
I made almost the entire file using the "details" and "summary" tags so that the person reading it can open and close each section of information. Since one of the sectors talks about my "passions" and one of them is reading, I thought it would be interesting (and more "human") to add what I am reading at the moment. So, I added a section to put the two books I'm reading/studying at the moment. The idea was to put an image of each book (so two images) and a caption below each image with the chapter that is currently being read (so two subtitles). I did some research on the use of the "img" tag and the best practices for inserting images in Markdown and HTML files and came to the conclusion that it would be better to add the images with HTML tags. To do this I used the "figure", "img" and "figcaption" tags.
What I wrote
<details>
<summary><strong>What am I reading now?</strong></summary>
<div style="display: flex; justify-content:space-between;">
<figure style="text-align:center; flex:1;">
<img src="src/book1.png" alt= "Summit Lake - Charles Donlea" width="200px"/>
<figcaption styles="text-align: center;">Chapter 26</figcaption>
</figure>
<figure style="text-align:center; flex:1;">
<img src="src/book2.png" alt= "Confident Data Skills - Kirill Eremenko" alt="Confident Data Skills" width="200px"/>
<figcaption styles="text-align: center;">Chapter 2</figcaption>
</figure>
</div>
</details>
Explaining what I done
As you can notice, I added a "div" because I concluded it would be better for stylizing the content on the screen. I set each image to have a width of 200 pixels and made use of flexbox to try to settle the images on the screen (even though I used "block" and "inline-block" before the "flex").
Problem Statement
I had a little trouble getting the images side by side and the captions below them, but in the end I understood what I was doing wrong. I am using VsCode as an editor and installed the "Markdown Preview Enhanced" plugin. And this is where the bizarre thing comes from: opening the preview in VsCode, the images are perfectly aligned and the captions are properly centered just below each image. However, when I upload it to GitHub, the images sit side by side, but the caption is on the right side of each image.
What I tried
I played with the spacing and display in the style. Initially I had written a "style" tag to be able to make the file more organized, but I found out that GitHub breaks this tag in the README for security reasons. So I passed the "style" tag as an argument to the proper tags (as you can see in the attachment above). I opened my browser's developer tool (I'm using the most current version of Chromium) and tried to understand and solve the problem. I could see that an "a" tag was added right after the "div" tag, and this is not in my original script. I concluded that a link was automatically added for when anyone clicks on the image, send them to the "src" folder that I created to store the images. This leads me to believe that it maybe captions have been "pushed" to the right side of the images because of that. I tried to highlight the "boxes" to see if I understood what was going on, and when I highlighted them it looked like 4 boxes (one for each image and one for each caption) were created side by side (which fried my head, honestly).
So I want to know if this is a bug in GitHub (since in the Preview in VsCode it looks normal) or if there is something wrong with what I did. Below, I attach the screenshots of the Preview and what appears in the README inside GitHub:
Finalizing
Anyway, I apologize if the text was too long. As I like to know the context of things when someone asks me something, I also like to give a context so that people can understand the problem. Thank you for any help I can get. o/
If anyone wants to see the problem, you can open my GitHub profile page here.
PS: I'm not a native. So if I wrote something wrong or if there are any problems with my grammar, please correct me and let me know what I'm doing wrong. ^^
I have already tried using the <center> and <\center> and it had worked but only temporarily.
After a few hours of working with the same RMD file, the <center> and <\center> stopped having its effect. I am not sure why.
But there should be another way because this <center> approach is an HTML approach. I am sure there must be some simple approach specifically for RMD files.
I'm building my first website using HTML and CSS on Visual Studio 2019, using a YouTube tutorial as well as my own small amount of knowledge. Except when I went to insert an image using:
<img src="image.jpg">
it doesn't find it.
I have also tried using the image source path thingy using:
<img src="C:/Users/Josh/Documents/HTML/BusinessWebsite/image.jpg">
but this also doesn't work. Does anybody know how to fix this?
Use the relative paths. The path is taken from where you have your html file. Like when you're moving between folders in the command line.
Well, you should have provided some more information, because your syntax seems to be perfect. There you can try out two things :
The first thing I can figure out that might have gone here would be that your image extension might not be correct, which means it might be something else than jpg(may be jpeg or png).
Use relative paths.
Example
I'm trying to add a Creative Commons image to the footer of my websites and the image simply won't display.
One of the websites (https://thegalleryof.me/) was created using Divi and when adding the code to the copyright section, the image appears in the preview, but after publishing and going to the site, it's not there. Even looking at the source code I found that the img tag was gone, only the a tag was present.
This is the code I've added:
<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png"/></a>
I've tried simply adding an image from my own website and that doesn't show up either (not even in the source code after publishing).
On another website using a regular theme (https://blog.ovidiuav.com/) the image (or any image) doesn't even show up in the preview.
I have no idea why this is happening, hoping someone can enlighten me.
Thank you!
WizardCoder commented above with the answer:
Divi strips out images from the footer credits textarea. You would either have to add a widget in that area, or create a child theme and hard code it in to the HTML.
If the image doesn't exist in the html markup there isn't much you can do with CSS, other than creating a pseudo element and adding the image as a background.