I've been experimenting with aligning h2 and img (icon) elements and although I added display: inline-block, they ended up shifting to the left of the section. Is there a way I can center them instead?
HTML:
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
CSS:
img {
display: inline-block;
vertical-align: -8px;
}
h2 {
display: inline-block;
text-align: center;
}
To ensure that both the text and image are centered, utilize a <div> element along with the text-align property:
<style>
div
{
text-align: center;
}
</style>
<div>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
</div>
If you want to easily center both the h2 and img tags, you can wrap them in a parent div and apply the flexbox property like so:
div{
display:flex;
justify-content:center;
align-items:center;
}
div img{
margin-left:10px;
}<div>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
</div>If you want to position the text "Coffee" and the cup image in the center of a section as depicted in the screenshot, one way to achieve this is by applying text-align: center to the <section> element using CSS. This style rule will centralize all items within that section.
section {
text-align: center;
}By setting <h2> as an inline-block, it will adjust its width based on the content length of "Coffee". As a result, utilizing text-align: center may not have the desired effect.
I am attempting to replicate the layout shown in the attached picture. How can I adjust this property? Expected output: I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting ...
At times, I enable the user to click on the <li> or <span class="icon"> elements, but if they happen to click twice, it causes a bit of chaos and spreads the blue selection all over :/ To address this issue, I have come up with two solutions: ...
Improve the user experience on my website by implementing a search feature for US states and Canadian territories. When visitors type in their selection, I want them to be able to click on an icon that will reveal relevant information about that choice. T ...
I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...
I want to include a Textbox and dropdown list in a new row every time I click a button. However, I seem to be having trouble with this process. Can someone assist me in solving this issue? Thank you in advance. HTML <table> <tr> ...
I'm struggling to replicate a Bootstrap V4 template where I cannot seem to align the form in the center within a jumbotron div. However, all other text is centered as expected. Even though I copied the code from a tutorial, it functions perfectly the ...
Two overlapping divs create an interesting sliding effect. A gray div slides in from the top over a black div. Hovering your mouse over the black div causes the gray one to slide out of view. If you hover over the gray div, it also slides out but pauses ...
So, I've managed to get this page working well but now I'm looking to display data based on a specific letter. Here's the code I currently have: <html> <head> <title>MySQLi Read Records</title> </ ...
Check out the Live Site I'm currently working on a website using jmpress, but I'm facing difficulties in implementing scrolling functionality for my content. While I can scroll in Chrome by selecting text and dragging down, I want to achieve thi ...
I'm new to Angular and I'm really enjoying learning how to work with it. Currently, I have a simple JSON file that contains text structured like this: "gettingstarted":{ "title":"Getting Started", "content":"<img ng-src='i ...
Currently building a webpage, I need to provide a link to a log file located on the server. The catch is that the filename includes a random number at the end, but I do know the starting part of it. Here's the snippet of my code: <a href="../New_f ...
Here is the sample HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...
Below is the script I am using to preview an image before it is uploaded. The HTML structure looks like this: <div> <img id="image" src="#"> </div> <input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(th ...
For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...
I'm trying to understand the purpose of ?action=add&code= in the code snippet below. I've searched on Google, but all I found was information about HTML action attributes. <form method="post" action="index.php?action=add&code=<?php ...
Currently, I am in the process of developing an application that utilizes single sign-on (SSO) for user authentication. Here is a breakdown of the workflow: Begin by launching the application on localhost:3000 (using a React Single Web Application). A po ...
Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/ <style> table td, th { padding: 8px; text-align: left; } table td:nth-child(1) { color: red; } table td { color: blue } </style> ... <table> <tr> ...
CSS: .imgECheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } .imgFCheck { position: absolute; top: 0; right: 5px; width: 15px; height: 15px; display: none; } Is ther ...
Objective: The aim is to allow the user to connect form fields with specific locations within a content from another div, and then add the text entered in individual input fields to those corresponding locations. Here is the link to the fiddle HTML: < ...
Looking for Suggestions on a New Title I am interested in using a script as the source attribute for an image, like this : <img src="img.js"/> Note: I am open to using any programming language, whether it be javascript or php. Here is what my fol ...